src/widgets/Viewport.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.Viewport\r
   9  * @extends Ext.Container\r
  10  * <p>A specialized container representing the viewable application area (the browser viewport).</p>\r
  11  * <p>The Viewport renders itself to the document body, and automatically sizes itself to the size of\r
  12  * the browser viewport and manages window resizing. There may only be one Viewport created\r
  13  * in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s\r
  14  * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}\r
  15  * method of any of its child Panels may themselves have a layout.</p>\r
  16  * <p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide\r
  17  * for scrolling if needed using the {@link #autoScroll} config.</p>\r
  18  * <p>An example showing a classic application border layout:</p><pre><code>\r
  19 new Ext.Viewport({\r
  20     layout: 'border',\r
  21     items: [{\r
  22         region: 'north',\r
  23         html: '&lt;h1 class="x-panel-header">Page Title&lt;/h1>',\r
  24         autoHeight: true,\r
  25         border: false,\r
  26         margins: '0 0 5 0'\r
  27     }, {\r
  28         region: 'west',\r
  29         collapsible: true,\r
  30         title: 'Navigation',\r
  31         width: 200\r
  32         // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout} \r
  33     }, {\r
  34         region: 'south',\r
  35         title: 'Title for Panel',\r
  36         collapsible: true,\r
  37         html: 'Information goes here',\r
  38         split: true,\r
  39         height: 100,\r
  40         minHeight: 100\r
  41     }, {\r
  42         region: 'east',\r
  43         title: 'Title for the Grid Panel',\r
  44         collapsible: true,\r
  45         split: true,\r
  46         width: 200,\r
  47         xtype: 'grid',\r
  48         // remaining grid configuration not shown ...\r
  49         // notice that the GridPanel is added directly as the region\r
  50         // it is not "overnested" inside another Panel\r
  51     }, {\r
  52         region: 'center',\r
  53         xtype: 'tabpanel', // TabPanel itself has no title\r
  54         items: {\r
  55             title: 'Default Tab',\r
  56             html: 'The first tab\'s content. Others may be added dynamically'\r
  57         }\r
  58     }]\r
  59 });\r
  60 </code></pre>\r
  61  * @constructor\r
  62  * Create a new Viewport\r
  63  * @param {Object} config The config object\r
  64  * @xtype viewport\r
  65  */\r
  66 Ext.Viewport = Ext.extend(Ext.Container, {\r
  67         /*\r
  68          * Privatize config options which, if used, would interfere with the\r
  69          * correct operation of the Viewport as the sole manager of the\r
  70          * layout of the document body.\r
  71          */\r
  72     /**\r
  73      * @cfg {Mixed} applyTo @hide\r
  74          */\r
  75     /**\r
  76      * @cfg {Boolean} allowDomMove @hide\r
  77          */\r
  78     /**\r
  79      * @cfg {Boolean} hideParent @hide\r
  80          */\r
  81     /**\r
  82      * @cfg {Mixed} renderTo @hide\r
  83          */\r
  84     /**\r
  85      * @cfg {Boolean} hideParent @hide\r
  86          */\r
  87     /**\r
  88      * @cfg {Number} height @hide\r
  89          */\r
  90     /**\r
  91      * @cfg {Number} width @hide\r
  92          */\r
  93     /**\r
  94      * @cfg {Boolean} autoHeight @hide\r
  95          */\r
  96     /**\r
  97      * @cfg {Boolean} autoWidth @hide\r
  98          */\r
  99     /**\r
 100      * @cfg {Boolean} deferHeight @hide\r
 101          */\r
 102     /**\r
 103      * @cfg {Boolean} monitorResize @hide\r
 104          */\r
 105     initComponent : function() {\r
 106         Ext.Viewport.superclass.initComponent.call(this);\r
 107         document.getElementsByTagName('html')[0].className += ' x-viewport';\r
 108         this.el = Ext.getBody();\r
 109         this.el.setHeight = Ext.emptyFn;\r
 110         this.el.setWidth = Ext.emptyFn;\r
 111         this.el.setSize = Ext.emptyFn;\r
 112         this.el.dom.scroll = 'no';\r
 113         this.allowDomMove = false;\r
 114         this.autoWidth = true;\r
 115         this.autoHeight = true;\r
 116         Ext.EventManager.onWindowResize(this.fireResize, this);\r
 117         this.renderTo = this.el;\r
 118     },\r
 119 \r
 120     fireResize : function(w, h){\r
 121         this.fireEvent('resize', this, w, h, w, h);\r
 122     }\r
 123 });\r
 124 Ext.reg('viewport', Ext.Viewport);