3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
9 * @extends Ext.Container
10 * <p>A specialized container representing the viewable application area (the browser viewport).</p>
11 * <p>The Viewport renders itself to the document body, and automatically sizes itself to the size of
12 * the browser viewport and manages window resizing. There may only be one Viewport created
13 * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
14 * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
15 * method of any of its child Panels may themselves have a layout.</p>
16 * <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
17 * for scrolling if needed using the {@link #autoScroll} config.</p>
18 * <p>An example showing a classic application border layout:</p><pre><code>
23 html: '<h1 class="x-panel-header">Page Title</h1>',
32 // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
35 title: 'Title for Panel',
37 html: 'Information goes here',
43 title: 'Title for the Grid Panel',
48 // remaining grid configuration not shown ...
49 // notice that the GridPanel is added directly as the region
50 // it is not "overnested" inside another Panel
53 xtype: 'tabpanel', // TabPanel itself has no title
56 html: 'The first tab\'s content. Others may be added dynamically'
62 * Create a new Viewport
63 * @param {Object} config The config object
66 Ext.Viewport = Ext.extend(Ext.Container, {
68 * Privatize config options which, if used, would interfere with the
69 * correct operation of the Viewport as the sole manager of the
70 * layout of the document body.
73 * @cfg {Mixed} applyTo @hide
76 * @cfg {Boolean} allowDomMove @hide
79 * @cfg {Boolean} hideParent @hide
82 * @cfg {Mixed} renderTo @hide
85 * @cfg {Boolean} hideParent @hide
88 * @cfg {Number} height @hide
91 * @cfg {Number} width @hide
94 * @cfg {Boolean} autoHeight @hide
97 * @cfg {Boolean} autoWidth @hide
100 * @cfg {Boolean} deferHeight @hide
103 * @cfg {Boolean} monitorResize @hide
106 initComponent : function() {
107 Ext.Viewport.superclass.initComponent.call(this);
108 document.getElementsByTagName('html')[0].className += ' x-viewport';
109 this.el = Ext.getBody();
110 this.el.setHeight = Ext.emptyFn;
111 this.el.setWidth = Ext.emptyFn;
112 this.el.setSize = Ext.emptyFn;
113 this.el.dom.scroll = 'no';
114 this.allowDomMove = false;
115 this.autoWidth = true;
116 this.autoHeight = true;
117 Ext.EventManager.onWindowResize(this.fireResize, this);
118 this.renderTo = this.el;
121 fireResize : function(w, h){
122 this.fireEvent('resize', this, w, h, w, h);
125 Ext.reg('viewport', Ext.Viewport);