ExtJS customized Viewport for Oracle APEX

One of the issues you may experience with ExtJS, is that it moves html DOM elements around when it renders the page. For example if your using tab panels or the Viewport.

This can result in your form elements ending up outside of the form.
You can solve this by using allowDomMove:false as discussed in this Apex Forum thread or solve the problem once and for all by using a customized version of the Ext.Viewport.

I like the second option better, so here is the solution.

1. Replace references to Ext.Viewport with Ext.ux.FormViewport (see below) in your javascript.
2. Add the following style to your css #wwvFlowForm {width:100%; height:100%;}

See also Building a complete Oracle Apex page template using ExtJS

Enjoy

Mark

/*
* Mark Lancaster Wednesday, 16 January 2008 12:00 PM
*

/**
* @class Ext.ux.FormViewport
* @extends Ext.Container
* A specialized container representing the viewable application area (the browser viewport).
* 
 The Viewport renders itself to the wwvFlowForm element, and automatically sizes itself to the size of
* the browser viewport and manages window resizing. There may only be one Viewport created
* in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
* added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
* method of any of its child Panels may themselves have a layout.
* 
The Viewport does not provide scrolling, so child Panels within the Viewport should provide
* for scrolling if needed using the {@link #autoScroll} config.
* By default, when applyTo is not specified, the Viewport renders itself to the document body.
*/
Ext.ux.FormViewport = Ext.extend(Ext.Container, {
/**
* @cfg {Mixed} applyTo
* The id of the node, a DOM node or an existing Element that is already present in
* the document that specifies some panel-specific structural markup.By default, when applyTo is not
* specified, the Viewport renders itself to the document body.
*/
initComponent : function() {
   Ext.ux.FormViewport.superclass.initComponent.call(this);
   document.getElementsByTagName('html')[0].className += ' x-viewport';

   // applyTo specified element
   this.el = Ext.get('wwvFlowForm');
   if (!this.el) {
       this.el = Ext.getBody();
   } else {
       // disable scroll on body
       Ext.getBody().dom.scroll = 'no';
   }

   this.el.setHeight = Ext.emptyFn;
   this.el.setWidth = Ext.emptyFn;
   this.el.setSize = Ext.emptyFn;
   this.el.dom.scroll = 'no';
   this.allowDomMove = false;
   this.autoWidth = true;
   this.autoHeight = true;
   Ext.EventManager.onWindowResize(this.fireResize, this);
   this.renderTo = this.el;
},

fireResize : function(w, h){
   this.fireEvent('resize', this, w, h, w, h);
}
});
Ext.reg('FormViewport', Ext.ux.FormViewport);