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  * @class Ext.container.Viewport
  17  * @extends Ext.container.Container
  18
  19 A specialized container representing the viewable application area (the browser viewport).
  20
  21 The Viewport renders itself to the document body, and automatically sizes itself to the size of
  22 the browser viewport and manages window resizing. There may only be one Viewport created
  23 in a page.
  24
  25 Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
  26 on its child Components if you configure it with a {@link #layout}.
  27
  28 A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
  29 required layout is simpler, a different layout should be chosen.
  30
  31 For example, to simply make a single child item occupy all available space, use {@link Ext.layout.container.Fit fit layout}.
  32
  33 To display one "active" item at full size from a choice of several child items, use {@link Ext.layout.container.Card card layout}.
  34
  35 Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
  36 added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
  37 method of any of its child Panels may themselves have a layout.
  38
  39 The Viewport does not provide scrolling, so child Panels within the Viewport should provide
  40 for scrolling if needed using the {@link #autoScroll} config.
  41 {@img Ext.container.Viewport/Ext.container.Viewport.png Ext.container.Viewport component}
  42 An example showing a classic application border layout:
  43
  44     Ext.create('Ext.container.Viewport', {
  45         layout: 'border',
  46         renderTo: Ext.getBody(),
  47         items: [{
  48             region: 'north',
  49             html: '<h1 class="x-panel-header">Page Title</h1>',
  50             autoHeight: true,
  51             border: false,
  52             margins: '0 0 5 0'
  53         }, {
  54             region: 'west',
  55             collapsible: true,
  56             title: 'Navigation',
  57             width: 150
  58             // could use a TreePanel or AccordionLayout for navigational items
  59         }, {
  60             region: 'south',
  61             title: 'South Panel',
  62             collapsible: true,
  63             html: 'Information goes here',
  64             split: true,
  65             height: 100,
  66             minHeight: 100
  67         }, {
  68             region: 'east',
  69             title: 'East Panel',
  70             collapsible: true,
  71             split: true,
  72             width: 150
  73         }, {
  74             region: 'center',
  75             xtype: 'tabpanel', // TabPanel itself has no title
  76             activeTab: 0,      // First tab active by default
  77             items: {
  78                 title: 'Default Tab',
  79                 html: 'The first tab\'s content. Others may be added dynamically'
  80             }
  81         }]
  82     });
  83
  84  * @markdown
  85  */
  86 Ext.define('Ext.container.Viewport', {
  87     extend: 'Ext.container.Container',
  88     alias: 'widget.viewport',
  89     requires: ['Ext.EventManager'],
  90     alternateClassName: 'Ext.Viewport',
  91
  92     /*
  93      * Privatize config options which, if used, would interfere with the
  94      * correct operation of the Viewport as the sole manager of the
  95      * layout of the document body.
  96      */
  97     /**
  98      * @cfg {Mixed} applyTo @hide
  99      */
 100     /**
 101      * @cfg {Boolean} allowDomMove @hide
 102      */
 103     /**
 104      * @cfg {Boolean} hideParent @hide
 105      */
 106     /**
 107      * @cfg {Mixed} renderTo @hide
 108      */
 109     /**
 110      * @cfg {Boolean} hideParent @hide
 111      */
 112     /**
 113      * @cfg {Number} height @hide
 114      */
 115     /**
 116      * @cfg {Number} width @hide
 117      */
 118     /**
 119      * @cfg {Boolean} autoHeight @hide
 120      */
 121     /**
 122      * @cfg {Boolean} autoWidth @hide
 123      */
 124     /**
 125      * @cfg {Boolean} deferHeight @hide
 126      */
 127     /**
 128      * @cfg {Boolean} monitorResize @hide
 129      */
 130
 131     isViewport: true,
 132
 133     ariaRole: 'application',
 134     initComponent : function() {
 135         var me = this,
 136             html = Ext.fly(document.body.parentNode),
 137             el;
 138         me.callParent(arguments);
 139         html.addCls(Ext.baseCSSPrefix + 'viewport');
 140         if (me.autoScroll) {
 141             html.setStyle('overflow', 'auto');
 142         }
 143         me.el = el = Ext.getBody();
 144         el.setHeight = Ext.emptyFn;
 145         el.setWidth = Ext.emptyFn;
 146         el.setSize = Ext.emptyFn;
 147         el.dom.scroll = 'no';
 148         me.allowDomMove = false;
 149         Ext.EventManager.onWindowResize(me.fireResize, me);
 150         me.renderTo = me.el;
 151         me.width = Ext.core.Element.getViewportWidth();
 152         me.height = Ext.core.Element.getViewportHeight();
 153     },
 154
 155     fireResize : function(w, h){
 156         // setSize is the single entry point to layouts
 157         this.setSize(w, h);
 158     }
 159 });
 160