/** * @class Ext.Viewport * @extends Ext.Container *

A specialized container representing the viewable application area (the browser viewport).

*

The Viewport renders itself to the document body, 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.

*

An example showing a classic application border layout:


new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 200
        // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout} 
    }, {
        region: 'south',
        title: 'Title for Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'Title for the Grid Panel',
        collapsible: true,
        split: true,
        width: 200,
        xtype: 'grid',
        // remaining grid configuration not shown ...
        // notice that the GridPanel is added directly as the region
        // it is not "overnested" inside another Panel
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});
* @constructor * Create a new Viewport * @param {Object} config The config object * @xtype viewport */ Ext.Viewport = Ext.extend(Ext.Container, { /* * Privatize config options which, if used, would interfere with the * correct operation of the Viewport as the sole manager of the * layout of the document body. */
/** * @cfg {Mixed} applyTo @hide */
/** * @cfg {Boolean} allowDomMove @hide */
/** * @cfg {Boolean} hideParent @hide */
/** * @cfg {Mixed} renderTo @hide */
/** * @cfg {Boolean} hideParent @hide */
/** * @cfg {Number} height @hide */
/** * @cfg {Number} width @hide */
/** * @cfg {Boolean} autoHeight @hide */
/** * @cfg {Boolean} autoWidth @hide */
/** * @cfg {Boolean} deferHeight @hide */
/** * @cfg {Boolean} monitorResize @hide */ initComponent : function() { Ext.Viewport.superclass.initComponent.call(this); document.getElementsByTagName('html')[0].className += ' x-viewport'; this.el = Ext.getBody(); 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('viewport', Ext.Viewport);