docs/source/Viewport.html

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