Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Viewport.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-container-Viewport'>/**
19 </span> * A specialized container representing the viewable application area (the browser viewport).
20  *
21  * The Viewport renders itself to the document body, and automatically sizes itself to the size of
22  * the browser viewport and manages window resizing. There may only be one Viewport created
23  * in a page.
24  *
25  * Like any {@link Ext.container.Container Container}, a Viewport will only perform sizing and positioning
26  * on its child Components if you configure it with a {@link #layout}.
27  *
28  * A Common layout used with Viewports is {@link Ext.layout.container.Border border layout}, but if the
29  * required layout is simpler, a different layout should be chosen.
30  *
31  * For example, to simply make a single child item occupy all available space, use
32  * {@link Ext.layout.container.Fit fit layout}.
33  *
34  * To display one &quot;active&quot; item at full size from a choice of several child items, use
35  * {@link Ext.layout.container.Card card layout}.
36  *
37  * Inner layouts are available by virtue of the fact that all {@link Ext.panel.Panel Panel}s
38  * added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
39  * method of any of its child Panels may themselves have a layout.
40  *
41  * The Viewport does not provide scrolling, so child Panels within the Viewport should provide
42  * for scrolling if needed using the {@link #autoScroll} config.
43  *
44  * An example showing a classic application border layout:
45  *
46  *     @example
47  *     Ext.create('Ext.container.Viewport', {
48  *         layout: 'border',
49  *         items: [{
50  *             region: 'north',
51  *             html: '&lt;h1 class=&quot;x-panel-header&quot;&gt;Page Title&lt;/h1&gt;',
52  *             autoHeight: true,
53  *             border: false,
54  *             margins: '0 0 5 0'
55  *         }, {
56  *             region: 'west',
57  *             collapsible: true,
58  *             title: 'Navigation',
59  *             width: 150
60  *             // could use a TreePanel or AccordionLayout for navigational items
61  *         }, {
62  *             region: 'south',
63  *             title: 'South Panel',
64  *             collapsible: true,
65  *             html: 'Information goes here',
66  *             split: true,
67  *             height: 100,
68  *             minHeight: 100
69  *         }, {
70  *             region: 'east',
71  *             title: 'East Panel',
72  *             collapsible: true,
73  *             split: true,
74  *             width: 150
75  *         }, {
76  *             region: 'center',
77  *             xtype: 'tabpanel', // TabPanel itself has no title
78  *             activeTab: 0,      // First tab active by default
79  *             items: {
80  *                 title: 'Default Tab',
81  *                 html: 'The first tab\'s content. Others may be added dynamically'
82  *             }
83  *         }]
84  *     });
85  */
86 Ext.define('Ext.container.Viewport', {
87     extend: 'Ext.container.Container',
88     alias: 'widget.viewport',
89     requires: ['Ext.EventManager'],
90     alternateClassName: 'Ext.Viewport',
91
92     // Privatize config options which, if used, would interfere with the
93     // correct operation of the Viewport as the sole manager of the
94     // layout of the document body.
95
96 <span id='Ext-container-Viewport-cfg-applyTo'>    /**
97 </span>     * @cfg {String/HTMLElement/Ext.Element} applyTo
98      * Not applicable.
99      */
100
101 <span id='Ext-container-Viewport-cfg-allowDomMove'>    /**
102 </span>     * @cfg {Boolean} allowDomMove
103      * Not applicable.
104      */
105
106 <span id='Ext-container-Viewport-cfg-hideParent'>    /**
107 </span>     * @cfg {Boolean} hideParent
108      * Not applicable.
109      */
110
111 <span id='Ext-container-Viewport-cfg-renderTo'>    /**
112 </span>     * @cfg {String/HTMLElement/Ext.Element} renderTo
113      * Not applicable. Always renders to document body.
114      */
115
116 <span id='Ext-container-Viewport-cfg-hideParent'>    /**
117 </span>     * @cfg {Boolean} hideParent
118      * Not applicable.
119      */
120
121 <span id='Ext-container-Viewport-cfg-height'>    /**
122 </span>     * @cfg {Number} height
123      * Not applicable. Sets itself to viewport width.
124      */
125
126 <span id='Ext-container-Viewport-cfg-width'>    /**
127 </span>     * @cfg {Number} width
128      * Not applicable. Sets itself to viewport height.
129      */
130
131 <span id='Ext-container-Viewport-cfg-autoHeight'>    /**
132 </span>     * @cfg {Boolean} autoHeight
133      * Not applicable.
134      */
135
136 <span id='Ext-container-Viewport-cfg-autoWidth'>    /**
137 </span>     * @cfg {Boolean} autoWidth
138      * Not applicable.
139      */
140
141 <span id='Ext-container-Viewport-cfg-deferHeight'>    /**
142 </span>     * @cfg {Boolean} deferHeight
143      * Not applicable.
144      */
145
146 <span id='Ext-container-Viewport-cfg-monitorResize'>    /**
147 </span>     * @cfg {Boolean} monitorResize
148      * Not applicable.
149      */
150
151     isViewport: true,
152
153     ariaRole: 'application',
154
155     initComponent : function() {
156         var me = this,
157             html = Ext.fly(document.body.parentNode),
158             el;
159         me.callParent(arguments);
160         html.addCls(Ext.baseCSSPrefix + 'viewport');
161         if (me.autoScroll) {
162             html.setStyle('overflow', 'auto');
163         }
164         me.el = el = Ext.getBody();
165         el.setHeight = Ext.emptyFn;
166         el.setWidth = Ext.emptyFn;
167         el.setSize = Ext.emptyFn;
168         el.dom.scroll = 'no';
169         me.allowDomMove = false;
170         Ext.EventManager.onWindowResize(me.fireResize, me);
171         me.renderTo = me.el;
172         me.width = Ext.Element.getViewportWidth();
173         me.height = Ext.Element.getViewportHeight();
174     },
175
176     fireResize : function(w, h){
177         // setSize is the single entry point to layouts
178         this.setSize(w, h);
179     }
180 });
181 </pre>
182 </body>
183 </html>