Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / 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>