src/container/Viewport.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   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.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * A specialized container representing the viewable application area (the browser viewport).
  17  *
  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
  20  * in a page.
  21  *
  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}.
  24  *
  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.
  27  *
  28  * For example, to simply make a single child item occupy all available space, use
  29  * {@link Ext.layout.container.Fit fit layout}.
  30  *
  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}.
  33  *
  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.
  37  *
  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.
  40  *
  41  * An example showing a classic application border layout:
  42  *
  43  *     @example
  44  *     Ext.create('Ext.container.Viewport', {
  45  *         layout: 'border',
  46  *         items: [{
  47  *             region: 'north',
  48  *             html: '<h1 class="x-panel-header">Page Title</h1>',
  49  *             autoHeight: true,
  50  *             border: false,
  51  *             margins: '0 0 5 0'
  52  *         }, {
  53  *             region: 'west',
  54  *             collapsible: true,
  55  *             title: 'Navigation',
  56  *             width: 150
  57  *             // could use a TreePanel or AccordionLayout for navigational items
  58  *         }, {
  59  *             region: 'south',
  60  *             title: 'South Panel',
  61  *             collapsible: true,
  62  *             html: 'Information goes here',
  63  *             split: true,
  64  *             height: 100,
  65  *             minHeight: 100
  66  *         }, {
  67  *             region: 'east',
  68  *             title: 'East Panel',
  69  *             collapsible: true,
  70  *             split: true,
  71  *             width: 150
  72  *         }, {
  73  *             region: 'center',
  74  *             xtype: 'tabpanel', // TabPanel itself has no title
  75  *             activeTab: 0,      // First tab active by default
  76  *             items: {
  77  *                 title: 'Default Tab',
  78  *                 html: 'The first tab\'s content. Others may be added dynamically'
  79  *             }
  80  *         }]
  81  *     });
  82  */
  83 Ext.define('Ext.container.Viewport', {
  84     extend: 'Ext.container.Container',
  85     alias: 'widget.viewport',
  86     requires: ['Ext.EventManager'],
  87     alternateClassName: 'Ext.Viewport',
  88
  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.
  92
  93     /**
  94      * @cfg {String/HTMLElement/Ext.Element} applyTo
  95      * Not applicable.
  96      */
  97
  98     /**
  99      * @cfg {Boolean} allowDomMove
 100      * Not applicable.
 101      */
 102
 103     /**
 104      * @cfg {Boolean} hideParent
 105      * Not applicable.
 106      */
 107
 108     /**
 109      * @cfg {String/HTMLElement/Ext.Element} renderTo
 110      * Not applicable. Always renders to document body.
 111      */
 112
 113     /**
 114      * @cfg {Boolean} hideParent
 115      * Not applicable.
 116      */
 117
 118     /**
 119      * @cfg {Number} height
 120      * Not applicable. Sets itself to viewport width.
 121      */
 122
 123     /**
 124      * @cfg {Number} width
 125      * Not applicable. Sets itself to viewport height.
 126      */
 127
 128     /**
 129      * @cfg {Boolean} autoHeight
 130      * Not applicable.
 131      */
 132
 133     /**
 134      * @cfg {Boolean} autoWidth
 135      * Not applicable.
 136      */
 137
 138     /**
 139      * @cfg {Boolean} deferHeight
 140      * Not applicable.
 141      */
 142
 143     /**
 144      * @cfg {Boolean} monitorResize
 145      * Not applicable.
 146      */
 147
 148     isViewport: true,
 149
 150     ariaRole: 'application',
 151
 152     initComponent : function() {
 153         var me = this,
 154             html = Ext.fly(document.body.parentNode),
 155             el;
 156         me.callParent(arguments);
 157         html.addCls(Ext.baseCSSPrefix + 'viewport');
 158         if (me.autoScroll) {
 159             html.setStyle('overflow', 'auto');
 160         }
 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);
 168         me.renderTo = me.el;
 169         me.width = Ext.Element.getViewportWidth();
 170         me.height = Ext.Element.getViewportHeight();
 171     },
 172
 173     fireResize : function(w, h){
 174         // setSize is the single entry point to layouts
 175         this.setSize(w, h);
 176     }
 177 });
 178