/*! - * Ext JS Library 3.3.0 - * Copyright(c) 2006-2010 Ext JS, Inc. - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** - * @class Ext.Viewport - * @extends Ext.Container - *- \ No newline at end of file +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 +
+/** + * 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 + * in a page. + * + * Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning + * on its child Components if you configure it with a {@link #layout}. + * + * A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the + * required layout is simpler, a different layout should be chosen. + * + * For example, to simply make a single child item occupy all available space, use + * {@link Ext.layout.container.Fit fit layout}. + * + * To display one "active" item at full size from a choice of several child items, use + * {@link Ext.layout.container.Card card layout}. + * + * Inner layouts are available by virtue of the fact that all {@link Ext.panel.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:
- * @constructor - * Create a new Viewport - * @param {Object} config The config object - * @xtype viewport + * 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: + * + * @example + * Ext.create('Ext.container.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: 150 + * // could use a TreePanel or AccordionLayout for navigational items + * }, { + * region: 'south', + * title: 'South Panel', + * collapsible: true, + * html: 'Information goes here', + * split: true, + * height: 100, + * minHeight: 100 + * }, { + * region: 'east', + * title: 'East Panel', + * collapsible: true, + * split: true, + * width: 150 + * }, { + * region: 'center', + * xtype: 'tabpanel', // TabPanel itself has no title + * activeTab: 0, // First tab active by default + * items: { + * title: 'Default Tab', + * html: 'The first tab\'s content. Others may be added dynamically' + * } + * }] + * }); */ -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 +Ext.define('Ext.container.Viewport', { + extend: 'Ext.container.Container', + alias: 'widget.viewport', + requires: ['Ext.EventManager'], + alternateClassName: 'Ext.Viewport', + + // 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 {String/HTMLElement/Ext.Element} applyTo + * Not applicable. */ - /** - * @cfg {Boolean} allowDomMove @hide + + /** + * @cfg {Boolean} allowDomMove + * Not applicable. */ - /** - * @cfg {Boolean} hideParent @hide + + /** + * @cfg {Boolean} hideParent + * Not applicable. */ - /** - * @cfg {Mixed} renderTo @hide + + /** + * @cfg {String/HTMLElement/Ext.Element} renderTo + * Not applicable. Always renders to document body. */ - /** - * @cfg {Boolean} hideParent @hide + + /** + * @cfg {Boolean} hideParent + * Not applicable. */ - /** - * @cfg {Number} height @hide + + /** + * @cfg {Number} height + * Not applicable. Sets itself to viewport width. */ - /** - * @cfg {Number} width @hide + + /** + * @cfg {Number} width + * Not applicable. Sets itself to viewport height. */ - /** - * @cfg {Boolean} autoHeight @hide + + /** + * @cfg {Boolean} autoHeight + * Not applicable. */ - /** - * @cfg {Boolean} autoWidth @hide + + /** + * @cfg {Boolean} autoWidth + * Not applicable. */ - /** - * @cfg {Boolean} deferHeight @hide + + /** + * @cfg {Boolean} deferHeight + * Not applicable. */ - /** - * @cfg {Boolean} monitorResize @hide + + /** + * @cfg {Boolean} monitorResize + * Not applicable. */ + isViewport: true, + + ariaRole: 'application', + 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; + var me = this, + html = Ext.fly(document.body.parentNode), + el; + me.callParent(arguments); + html.addCls(Ext.baseCSSPrefix + 'viewport'); + if (me.autoScroll) { + html.setStyle('overflow', 'auto'); + } + me.el = el = Ext.getBody(); + el.setHeight = Ext.emptyFn; + el.setWidth = Ext.emptyFn; + el.setSize = Ext.emptyFn; + el.dom.scroll = 'no'; + me.allowDomMove = false; + Ext.EventManager.onWindowResize(me.fireResize, me); + me.renderTo = me.el; + me.width = Ext.Element.getViewportWidth(); + me.height = Ext.Element.getViewportHeight(); }, fireResize : function(w, h){ - this.fireEvent('resize', this, w, h, w, h); + // setSize is the single entry point to layouts + this.setSize(w, h); } }); -Ext.reg('viewport', Ext.Viewport); --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' - } - }] -}); -