docs/source/Viewport.html

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