source/widgets/Viewport.js

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