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