-<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif">Viewport</pre></div><h1>Class <a href="source/Viewport.html#cls-Ext.Viewport">Ext.Viewport</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">Viewport.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Viewport.html#cls-Ext.Viewport">Viewport</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Container.html" ext:cls="Ext.Container" ext:member="">Container</a></td></tr></table><div class="description"><p>A specialized container representing the viewable application area (the browser viewport).</p>\r
-<p>The Viewport renders itself to the document body, and automatically sizes itself to the size of\r
-the browser viewport and manages window resizing. There may only be one Viewport created\r
-in a page. Inner layouts are available by virtue of the fact that all <a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Panel</a>s\r
-added to the Viewport, either through its <a href="output/Ext.Viewport.html#Ext.Viewport-items" ext:member="items" ext:cls="Ext.Viewport">items</a>, or through the items, or the <a href="output/Ext.Viewport.html#Ext.Viewport-add" ext:member="add" ext:cls="Ext.Viewport">add</a>\r
-method of any of its child Panels may themselves have a layout.</p>\r
-<p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide\r
-for scrolling if needed using the <a href="output/Ext.Viewport.html#Ext.Viewport-autoScroll" ext:member="autoScroll" ext:cls="Ext.Viewport">autoScroll</a> config.</p>\r
-<p>An example showing a classic application border layout:</p><pre><code><b>new</b> Ext.Viewport({\r
- layout: <em>'border'</em>,\r
- items: [{\r
- region: <em>'north'</em>,\r
- html: <em>'<h1 class=<em>"x-panel-header"</em>>Page Title</h1>'</em>,\r
- autoHeight: true,\r
- border: false,\r
- margins: <em>'0 0 5 0'</em>\r
- }, {\r
- region: <em>'west'</em>,\r
- collapsible: true,\r
- title: <em>'Navigation'</em>,\r
- width: 200\r
- <i>// the west region might typically utilize a <a href="output/Ext.tree.TreePanel.html" ext:cls="Ext.tree.TreePanel">TreePanel</a> or a Panel <b>with</b> <a href="output/Ext.layout.AccordionLayout.html" ext:cls="Ext.layout.AccordionLayout">Accordion layout</a>\r</i>
- }, {\r
- region: <em>'south'</em>,\r
- title: <em>'Title <b>for</b> Panel'</em>,\r
- collapsible: true,\r
- html: <em>'Information goes here'</em>,\r
- split: true,\r
- height: 100,\r
- minHeight: 100\r
- }, {\r
- region: <em>'east'</em>,\r
- title: <em>'Title <b>for</b> the Grid Panel'</em>,\r
- collapsible: true,\r
- split: true,\r
- width: 200,\r
- xtype: <em>'grid'</em>,\r
- <i>// remaining grid configuration not shown ...\r</i>
- <i>// notice that the GridPanel is added directly as the region\r</i>
- <i>// it is not <em>"overnested"</em> inside another Panel\r</i>
- }, {\r
- region: <em>'center'</em>,\r
- xtype: <em>'tabpanel'</em>, <i>// TabPanel itself has no title\r</i>
- items: {\r
- title: <em>'Default Tab'</em>,\r
- html: <em>'The first tab\'</em>s content. Others may be added dynamically<em>'\r
- }\r
- }]\r
-});</code></pre></div><div class="hr"></div><a id="Ext.Viewport-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Container-activeItem"></a><b><a href="source/Container.html#cfg-Ext.Container-activeItem">activeItem</a></b> : String/Number<div class="mdesc"><div class="short">A string component id or the numeric index of the component that should be initially activated within the\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.Viewport-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Viewport-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Viewport-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Viewport-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Viewport"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif">Viewport</pre></div><h1>Class <a href="source/Viewport.html#cls-Ext.Viewport">Ext.Viewport</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/Viewport.html#cls-Ext.Viewport">Viewport.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Viewport.html#cls-Ext.Viewport">Viewport</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Container.html" ext:cls="Ext.Container" ext:member="">Container</a></td></tr></table><div class="description"><p>A specialized container representing the viewable application area (the browser viewport).</p>
+<p>The Viewport renders itself to the document body, and automatically sizes itself to the size of
+the browser viewport and manages window resizing. There may only be one Viewport created
+in a page. Inner layouts are available by virtue of the fact that all <a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Panel</a>s
+added to the Viewport, either through its <a href="output/Ext.Viewport.html#Ext.Viewport-items" ext:member="items" ext:cls="Ext.Viewport">items</a>, or through the items, or the <a href="output/Ext.Viewport.html#Ext.Viewport-add" ext:member="add" ext:cls="Ext.Viewport">add</a>
+method of any of its child Panels may themselves have a layout.</p>
+<p>The Viewport does not provide scrolling, so child Panels within the Viewport should provide
+for scrolling if needed using the <a href="output/Ext.Viewport.html#Ext.Viewport-autoScroll" ext:member="autoScroll" ext:cls="Ext.Viewport">autoScroll</a> config.</p>
+<p>An example showing a classic application border layout:</p><pre><code><b>new</b> Ext.Viewport({
+ layout: <em>'border'</em>,
+ items: [{
+ region: <em>'north'</em>,
+ html: <em>'<h1 class=<em>"x-panel-header"</em>>Page Title</h1>'</em>,
+ autoHeight: true,
+ border: false,
+ margins: <em>'0 0 5 0'</em>
+ }, {
+ region: <em>'west'</em>,
+ collapsible: true,
+ title: <em>'Navigation'</em>,
+ width: 200
+ <i>// the west region might typically utilize a <a href="output/Ext.tree.TreePanel.html" ext:cls="Ext.tree.TreePanel">TreePanel</a> or a Panel <b>with</b> <a href="output/Ext.layout.AccordionLayout.html" ext:cls="Ext.layout.AccordionLayout">Accordion layout</a></i>
+ }, {
+ region: <em>'south'</em>,
+ title: <em>'Title <b>for</b> Panel'</em>,
+ collapsible: true,
+ html: <em>'Information goes here'</em>,
+ split: true,
+ height: 100,
+ minHeight: 100
+ }, {
+ region: <em>'east'</em>,
+ title: <em>'Title <b>for</b> the Grid Panel'</em>,
+ collapsible: true,
+ split: true,
+ width: 200,
+ xtype: <em>'grid'</em>,
+ <i>// remaining grid configuration not shown ...</i>
+ <i>// notice that the GridPanel is added directly as the region</i>
+ <i>// it is not <em>"overnested"</em> inside another Panel</i>
+ }, {
+ region: <em>'center'</em>,
+ xtype: <em>'tabpanel'</em>, <i>// TabPanel itself has no title</i>
+ items: {
+ title: <em>'Default Tab'</em>,
+ html: <em>'The first tab\'</em>s content. Others may be added dynamically<em>'
+ }
+ }]
+});</code></pre></div><div class="hr"></div><a id="Ext.Viewport-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Container-activeItem"></a><b><a href="source/Container.html#cfg-Ext.Container-activeItem">activeItem</a></b> : String/Number<div class="mdesc"><div class="short">A string component id or the numeric index of the component that should be initially activated within the