src/widgets/Viewport.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.Viewport
   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>
  19 new Ext.Viewport({
  20     layout: 'border',
  21     items: [{
  22         region: 'north',
  23         html: '&lt;h1 class="x-panel-header">Page Title&lt;/h1>',
  24         autoHeight: true,
  25         border: false,
  26         margins: '0 0 5 0'
  27     }, {
  28         region: 'west',
  29         collapsible: true,
  30         title: 'Navigation',
  31         width: 200
  32         // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}
  33     }, {
  34         region: 'south',
  35         title: 'Title for Panel',
  36         collapsible: true,
  37         html: 'Information goes here',
  38         split: true,
  39         height: 100,
  40         minHeight: 100
  41     }, {
  42         region: 'east',
  43         title: 'Title for the Grid Panel',
  44         collapsible: true,
  45         split: true,
  46         width: 200,
  47         xtype: 'grid',
  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
  51     }, {
  52         region: 'center',
  53         xtype: 'tabpanel', // TabPanel itself has no title
  54         items: {
  55             title: 'Default Tab',
  56             html: 'The first tab\'s content. Others may be added dynamically'
  57         }
  58     }]
  59 });
  60 </code></pre>
  61  * @constructor
  62  * Create a new Viewport
  63  * @param {Object} config The config object
  64  * @xtype viewport
  65  */
  66 Ext.Viewport = Ext.extend(Ext.Container, {
  67     /*
  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.
  71      */
  72     /**
  73      * @cfg {Mixed} applyTo @hide
  74      */
  75     /**
  76      * @cfg {Boolean} allowDomMove @hide
  77      */
  78     /**
  79      * @cfg {Boolean} hideParent @hide
  80      */
  81     /**
  82      * @cfg {Mixed} renderTo @hide
  83      */
  84     /**
  85      * @cfg {Boolean} hideParent @hide
  86      */
  87     /**
  88      * @cfg {Number} height @hide
  89      */
  90     /**
  91      * @cfg {Number} width @hide
  92      */
  93     /**
  94      * @cfg {Boolean} autoHeight @hide
  95      */
  96     /**
  97      * @cfg {Boolean} autoWidth @hide
  98      */
  99     /**
 100      * @cfg {Boolean} deferHeight @hide
 101      */
 102     /**
 103      * @cfg {Boolean} monitorResize @hide
 104      */
 105
 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;
 119     },
 120
 121     fireResize : function(w, h){
 122         this.fireEvent('resize', this, w, h, w, h);
 123     }
 124 });
 125 Ext.reg('viewport', Ext.Viewport);