3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * A specialized container representing the viewable application area (the browser viewport).
18 * The Viewport renders itself to the document body, and automatically sizes itself to the size of
19 * the browser viewport and manages window resizing. There may only be one Viewport created
22 * Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
23 * on its child Components if you configure it with a {@link #layout}.
25 * A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
26 * required layout is simpler, a different layout should be chosen.
28 * For example, to simply make a single child item occupy all available space, use
29 * {@link Ext.layout.container.Fit fit layout}.
31 * To display one "active" item at full size from a choice of several child items, use
32 * {@link Ext.layout.container.Card card layout}.
34 * Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
35 * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
36 * method of any of its child Panels may themselves have a layout.
38 * The Viewport does not provide scrolling, so child Panels within the Viewport should provide
39 * for scrolling if needed using the {@link #autoScroll} config.
41 * An example showing a classic application border layout:
44 * Ext.create('Ext.container.Viewport', {
48 * html: '<h1 class="x-panel-header">Page Title</h1>',
55 * title: 'Navigation',
57 * // could use a TreePanel or AccordionLayout for navigational items
60 * title: 'South Panel',
62 * html: 'Information goes here',
68 * title: 'East Panel',
74 * xtype: 'tabpanel', // TabPanel itself has no title
75 * activeTab: 0, // First tab active by default
77 * title: 'Default Tab',
78 * html: 'The first tab\'s content. Others may be added dynamically'
83 Ext.define('Ext.container.Viewport', {
84 extend: 'Ext.container.Container',
85 alias: 'widget.viewport',
86 requires: ['Ext.EventManager'],
87 alternateClassName: 'Ext.Viewport',
89 // Privatize config options which, if used, would interfere with the
90 // correct operation of the Viewport as the sole manager of the
91 // layout of the document body.
94 * @cfg {String/HTMLElement/Ext.Element} applyTo
99 * @cfg {Boolean} allowDomMove
104 * @cfg {Boolean} hideParent
109 * @cfg {String/HTMLElement/Ext.Element} renderTo
110 * Not applicable. Always renders to document body.
114 * @cfg {Boolean} hideParent
119 * @cfg {Number} height
120 * Not applicable. Sets itself to viewport width.
124 * @cfg {Number} width
125 * Not applicable. Sets itself to viewport height.
129 * @cfg {Boolean} autoHeight
134 * @cfg {Boolean} autoWidth
139 * @cfg {Boolean} deferHeight
144 * @cfg {Boolean} monitorResize
150 ariaRole: 'application',
152 initComponent : function() {
154 html = Ext.fly(document.body.parentNode),
156 me.callParent(arguments);
157 html.addCls(Ext.baseCSSPrefix + 'viewport');
159 html.setStyle('overflow', 'auto');
161 me.el = el = Ext.getBody();
162 el.setHeight = Ext.emptyFn;
163 el.setWidth = Ext.emptyFn;
164 el.setSize = Ext.emptyFn;
165 el.dom.scroll = 'no';
166 me.allowDomMove = false;
167 Ext.EventManager.onWindowResize(me.fireResize, me);
169 me.width = Ext.Element.getViewportWidth();
170 me.height = Ext.Element.getViewportHeight();
173 fireResize : function(w, h){
174 // setSize is the single entry point to layouts