docs/source/Viewport.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.Viewport"></div>/**\r
  10  * @class Ext.Viewport\r
  11  * @extends Ext.Container\r
  12  * <p>A specialized container representing the viewable application area (the browser viewport).</p>\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  * <p>An example showing a classic application border layout:</p><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         width: 200\r
  34         // the west region might typically utilize a {@link Ext.tree.TreePanel TreePanel} or a Panel with {@link Ext.layout.AccordionLayout Accordion layout}\r
  35     }, {\r
  36         region: 'south',\r
  37         title: 'Title for Panel',\r
  38         collapsible: true,\r
  39         html: 'Information goes here',\r
  40         split: true,\r
  41         height: 100,\r
  42         minHeight: 100\r
  43     }, {\r
  44         region: 'east',\r
  45         title: 'Title for the Grid Panel',\r
  46         collapsible: true,\r
  47         split: true,\r
  48         width: 200,\r
  49         xtype: 'grid',\r
  50         // remaining grid configuration not shown ...\r
  51         // notice that the GridPanel is added directly as the region\r
  52         // it is not "overnested" inside another Panel\r
  53     }, {\r
  54         region: 'center',\r
  55         xtype: 'tabpanel', // TabPanel itself has no title\r
  56         items: {\r
  57             title: 'Default Tab',\r
  58             html: 'The first tab\'s content. Others may be added dynamically'\r
  59         }\r
  60     }]\r
  61 });\r
  62 </code></pre>\r
  63  * @constructor\r
  64  * Create a new Viewport\r
  65  * @param {Object} config The config object\r
  66  * @xtype viewport\r
  67  */\r
  68 Ext.Viewport = Ext.extend(Ext.Container, {\r
  69     /*\r
  70      * Privatize config options which, if used, would interfere with the\r
  71      * correct operation of the Viewport as the sole manager of the\r
  72      * layout of the document body.\r
  73      */\r
  74     <div id="cfg-Ext.Viewport-applyTo"></div>/**\r
  75      * @cfg {Mixed} applyTo @hide\r
  76      */\r
  77     <div id="cfg-Ext.Viewport-allowDomMove"></div>/**\r
  78      * @cfg {Boolean} allowDomMove @hide\r
  79      */\r
  80     <div id="cfg-Ext.Viewport-hideParent"></div>/**\r
  81      * @cfg {Boolean} hideParent @hide\r
  82      */\r
  83     <div id="cfg-Ext.Viewport-renderTo"></div>/**\r
  84      * @cfg {Mixed} renderTo @hide\r
  85      */\r
  86     <div id="cfg-Ext.Viewport-hideParent"></div>/**\r
  87      * @cfg {Boolean} hideParent @hide\r
  88      */\r
  89     <div id="cfg-Ext.Viewport-height"></div>/**\r
  90      * @cfg {Number} height @hide\r
  91      */\r
  92     <div id="cfg-Ext.Viewport-width"></div>/**\r
  93      * @cfg {Number} width @hide\r
  94      */\r
  95     <div id="cfg-Ext.Viewport-autoHeight"></div>/**\r
  96      * @cfg {Boolean} autoHeight @hide\r
  97      */\r
  98     <div id="cfg-Ext.Viewport-autoWidth"></div>/**\r
  99      * @cfg {Boolean} autoWidth @hide\r
 100      */\r
 101     <div id="cfg-Ext.Viewport-deferHeight"></div>/**\r
 102      * @cfg {Boolean} deferHeight @hide\r
 103      */\r
 104     <div id="cfg-Ext.Viewport-monitorResize"></div>/**\r
 105      * @cfg {Boolean} monitorResize @hide\r
 106      */\r
 107 \r
 108     initComponent : function() {\r
 109         Ext.Viewport.superclass.initComponent.call(this);\r
 110         document.getElementsByTagName('html')[0].className += ' x-viewport';\r
 111         this.el = Ext.getBody();\r
 112         this.el.setHeight = Ext.emptyFn;\r
 113         this.el.setWidth = Ext.emptyFn;\r
 114         this.el.setSize = Ext.emptyFn;\r
 115         this.el.dom.scroll = 'no';\r
 116         this.allowDomMove = false;\r
 117         this.autoWidth = true;\r
 118         this.autoHeight = true;\r
 119         Ext.EventManager.onWindowResize(this.fireResize, this);\r
 120         this.renderTo = this.el;\r
 121     },\r
 122 \r
 123     fireResize : function(w, h){\r
 124         this.fireEvent('resize', this, w, h, w, h);\r
 125     }\r
 126 });\r
 127 Ext.reg('viewport', Ext.Viewport);\r
 128 </pre>    \r
 129 </body>\r
 130 </html>