-<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.Container-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Container-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Container-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Container-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Container"><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">Container</pre></div><h1>Class <a href="source/Container.html#cls-Ext.Container">Ext.Container</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">Container.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Container.html#cls-Ext.Container">Container</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Panel</a>, <a href="output/Ext.Toolbar.html" ext:cls="Ext.Toolbar">Toolbar</a>, <a href="output/Ext.Viewport.html" ext:cls="Ext.Viewport">Viewport</a>, <a href="output/Ext.menu.Menu.html" ext:cls="Ext.menu.Menu">Menu</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.BoxComponent.html" ext:cls="Ext.BoxComponent" ext:member="">BoxComponent</a></td></tr><tr><td class="hd-info"></td></tr><tr><td class="label">xtype:</td><td class="hd-info">container</td></tr></table><div class="description"><p>Base class for any <a href="output/Ext.BoxComponent.html" ext:cls="Ext.BoxComponent">Ext.BoxComponent</a> that may contain other Components. Containers handle the\r
-basic behavior of containing items, namely adding, inserting and removing items.</p>\r
-<p>The most commonly used Container classes are <a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Ext.Panel</a>, <a href="output/Ext.Window.html" ext:cls="Ext.Window">Ext.Window</a> and <a href="output/Ext.TabPanel.html" ext:cls="Ext.TabPanel">Ext.TabPanel</a>.\r
-If you do not need the capabilities offered by the aforementioned classes you can create a lightweight\r
-Container to be encapsulated by an HTML element to your specifications by using the\r
-<tt><b><a href="output/Ext.Component.html#Ext.Component-autoEl" ext:member="autoEl" ext:cls="Ext.Component">autoEl</a></b></tt> config option. This is a useful technique when creating\r
-embedded <a href="output/Ext.layout.ColumnLayout.html" ext:cls="Ext.layout.ColumnLayout">column</a> layouts inside <a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">FormPanels</a>\r
-for example.</p>\r
-<p>The code below illustrates both how to explicitly create a Container, and how to implicitly\r
-create one using the <b><tt>'container'</tt></b> xtype:<pre><code><i>// explicitly create a Container\r</i>
-<b>var</b> embeddedColumns = <b>new</b> Ext.Container({\r
- autoEl: <em>'div'</em>, <i>// This is the <b>default</b>\r</i>
- layout: <em>'column'</em>,\r
- defaults: {\r
- <i>// implicitly create Container by specifying xtype\r</i>
- xtype: <em>'container'</em>,\r
- autoEl: <em>'div'</em>, <i>// This is the <b>default</b>.\r</i>
- layout: <em>'form'</em>,\r
- columnWidth: 0.5,\r
- style: {\r
- padding: <em>'10px'</em>\r
- }\r
- },\r
-<i>// The two items below will be Ext.Containers, each encapsulated by a <DIV> element.\r</i>
- items: [{\r
- items: {\r
- xtype: <em>'datefield'</em>,\r
- name: <em>'startDate'</em>,\r
- fieldLabel: <em>'Start date'</em>\r
- }\r
- }, {\r
- items: {\r
- xtype: <em>'datefield'</em>,\r
- name: <em>'endDate'</em>,\r
- fieldLabel: <em>'End date'</em>\r
- }\r
- }]\r
-});</code></pre></p>\r
-<p><u><b>Layout</b></u></p>\r
-<p>Container classes delegate the rendering of child Components to a layout\r
-manager class which must be configured into the Container using the\r
-<code><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></code> configuration property.</p>\r
-<p>When either specifying child <code><a href="output/Ext.Container.html#Ext.Container-items" ext:member="items" ext:cls="Ext.Container">items</a></code> of a Container,\r
-or dynamically <a href="output/Ext.Container.html#Ext.Container-add" ext:member="add" ext:cls="Ext.Container">adding</a> Components to a Container, remember to\r
-consider how you wish the Container to arrange those child elements, and\r
-whether those child elements need to be sized using one of Ext's built-in\r
-<b><code><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></code></b> schemes. By default, Containers use the\r
-<a href="output/Ext.layout.ContainerLayout.html" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a> scheme which only\r
-renders child components, appending them one after the other inside the\r
-Container, and <b>does not apply any sizing</b> at all.</p>\r
-<p>A common mistake is when a developer neglects to specify a\r
-<b><code><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></code></b> (e.g. widgets like GridPanels or\r
-TreePanels are added to Containers for which no <tt><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></tt>\r
-has been specified). If a Container is left to use the default\r
-<a href="output/Ext.layout.ContainerLayout.html" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a> scheme, none of its\r
-child components will be resized, or changed in any way when the Container\r
-is resized.</p>\r
-<p>Certain layout managers allow dynamic addition of child components.\r
-Those that do include <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a>,\r
-<a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">Ext.layout.AnchorLayout</a>, <a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>, and\r
-<a href="output/Ext.layout.TableLayout.html" ext:cls="Ext.layout.TableLayout">Ext.layout.TableLayout</a>. For example:<pre><code><i>// Create the GridPanel.\r</i>
-<b>var</b> myNewGrid = <b>new</b> Ext.grid.GridPanel({\r
- store: myStore,\r
- columns: myColumnModel,\r
- title: <em>'Results'</em>, <i>// the title becomes the title of the tab\r</i>
-});\r
-\r
-myTabPanel.add(myNewGrid); <i>// <a href="output/Ext.TabPanel.html" ext:cls="Ext.TabPanel">Ext.TabPanel</a> implicitly uses <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">CardLayout</a>\r</i>
-myTabPanel.<a href="output/Ext.TabPanel.html#Ext.TabPanel-setActiveTab" ext:member="setActiveTab" ext:cls="Ext.TabPanel">setActiveTab</a>(myNewGrid);</code></pre></p>\r
-<p>The example above adds a newly created GridPanel to a TabPanel. Note that\r
-a TabPanel uses <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a> as its layout manager which\r
-means all its child items are sized to <a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout">fit</a>\r
-exactly into its client area.\r
-<p><b><u>Overnesting is a common problem</u></b>.\r
-An example of overnesting occurs when a GridPanel is added to a TabPanel\r
-by wrapping the GridPanel <i>inside</i> a wrapping Panel (that has no\r
-<tt><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></tt> specified) and then add that wrapping Panel\r
-to the TabPanel. The point to realize is that a GridPanel <b>is</b> a\r
-Component which can be added directly to a Container. If the wrapping Panel\r
-has no <tt><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></tt> configuration, then the overnested\r
-GridPanel will not be sized as expected.<p>\r
-<p><u><b>Adding via remote configuration</b></u></p>\r
-<p>A server side script can be used to add Components which are generated dynamically on the server.\r
-An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server\r
-based on certain parameters:\r
-</p><pre><code><i>// execute an Ajax request to invoke server side script:\r</i>
-Ext.Ajax.request({\r
- url: <em>'gen-invoice-grid.php'</em>,\r
- <i>// send additional parameters to instruct server script\r</i>
- params: {\r
- startDate: Ext.getCmp(<em>'start-date'</em>).getValue(),\r
- endDate: Ext.getCmp(<em>'end-date'</em>).getValue()\r
- },\r
- <i>// process the response object to add it to the TabPanel:\r</i>
- success: <b>function</b>(xhr) {\r
- <b>var</b> newComponent = eval(xhr.responseText); <i>// see discussion below\r</i>
- myTabPanel.add(newComponent); <i>// add the component to the TabPanel\r</i>
- myTabPanel.setActiveTab(newComponent);\r
- },\r
- failure: <b>function</b>() {\r
- Ext.Msg.alert(<em>"Grid create failed"</em>, <em>"Server communication failure"</em>);\r
- }\r
-});</code></pre>\r
-<p>The server script needs to return an executable Javascript statement which, when processed\r
-using <tt>eval()</tt>, will return either a config object with an <a href="output/Ext.Component.html#Ext.Component-xtype" ext:member="xtype" ext:cls="Ext.Component">xtype</a>,\r
-or an instantiated Component. The server might return this for example:</p><pre><code>(<b>function</b>() {\r
- <b>function</b> formatDate(value){\r
- <b>return</b> value ? value.dateFormat(<em>'M d, Y'</em>) : <em>''</em>;\r
- };\r
-\r
- <b>var</b> store = <b>new</b> Ext.data.Store({\r
- url: <em>'get-invoice-data.php'</em>,\r
- baseParams: {\r
- startDate: <em>'01/01/2008'</em>,\r
- endDate: <em>'01/31/2008'</em>\r
- },\r
- reader: <b>new</b> Ext.data.JsonReader({\r
- record: <em>'transaction'</em>,\r
- idProperty: <em>'id'</em>,\r
- totalRecords: <em>'total'</em>\r
- }, [\r
- <em>'customer'</em>,\r
- <em>'invNo'</em>,\r
- {name: <em>'date'</em>, type: <em>'date'</em>, dateFormat: <em>'m/d/Y'</em>},\r
- {name: <em>'value'</em>, type: <em>'float'</em>}\r
- ])\r
- });\r
-\r
- <b>var</b> grid = <b>new</b> Ext.grid.GridPanel({\r
- title: <em>'Invoice Report'</em>,\r
- bbar: <b>new</b> Ext.PagingToolbar(store),\r
- store: store,\r
- columns: [\r
- {header: <em>"Customer"</em>, width: 250, dataIndex: <em>'customer'</em>, sortable: true},\r
- {header: <em>"Invoice Number"</em>, width: 120, dataIndex: <em>'invNo'</em>, sortable: true},\r
- {header: <em>"Invoice Date"</em>, width: 100, dataIndex: <em>'date'</em>, renderer: formatDate, sortable: true},\r
- {header: <em>"Value"</em>, width: 120, dataIndex: <em>'value'</em>, renderer: <em>'usMoney'</em>, sortable: true}\r
- ],\r
- });\r
- store.load();\r
- <b>return</b> grid; <i>// <b>return</b> instantiated component\r</i>
-})();</code></pre>\r
-<p>When the above code fragment is passed through the <tt>eval</tt> function in the success handler\r
-of the Ajax request, the code is executed by the Javascript processor, and the anonymous function\r
-runs, and returns the instantiated grid component.</p>\r
-<p>Note: since the code above is <i>generated</i> by a server script, the <tt>baseParams</tt> for\r
-the Store, the metadata to allow generation of the Record layout, and the ColumnModel\r
-can all be generated into the code since these are all known on the server.</p></div><div class="hr"></div><a id="Ext.Container-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 "><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
-container'...</div><div class="long">A string component id or the numeric index of the component that should be initially activated within the\r
-container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first\r
-item in the container's collection). activeItem only applies to layout styles that can display\r
-items one at a time (like <a href="output/Ext.layout.AccordionLayout.html" ext:cls="Ext.layout.AccordionLayout">Ext.layout.AccordionLayout</a>, <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a> and\r
-<a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout">Ext.layout.FitLayout</a>). Related to <a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-activeItem" ext:member="activeItem" ext:cls="Ext.layout.ContainerLayout">Ext.layout.ContainerLayout.activeItem</a>.</div></div></td><td class="msource">Container</td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-allowDomMove"></a><b><a href="source/Component.html#cfg-Ext.Component-allowDomMove">allowDomMove</a></b> : Boolean<div class="mdesc">Whether the component can move the Dom node when rendering (defaults to true).</div></td><td class="msource"><a href="output/Ext.Component.html#allowDomMove" ext:member="#allowDomMove" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-anchor"></a><b><a href="source/Component.html#cfg-Ext.Component-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.Container-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Container-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Container-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Container-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Container"><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">Container</pre></div><h1>Class <a href="source/Container.html#cls-Ext.Container">Ext.Container</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/Container.html#cls-Ext.Container">Container.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Container.html#cls-Ext.Container">Container</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Panel</a>, <a href="output/Ext.Toolbar.html" ext:cls="Ext.Toolbar">Toolbar</a>, <a href="output/Ext.Viewport.html" ext:cls="Ext.Viewport">Viewport</a>, <a href="output/Ext.menu.Menu.html" ext:cls="Ext.menu.Menu">Menu</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.BoxComponent.html" ext:cls="Ext.BoxComponent" ext:member="">BoxComponent</a></td></tr></table><div class="description"><p>Base class for any <a href="output/Ext.BoxComponent.html" ext:cls="Ext.BoxComponent">Ext.BoxComponent</a> that may contain other Components. Containers handle the
+basic behavior of containing items, namely adding, inserting and removing items.</p>
+<p>The most commonly used Container classes are <a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Ext.Panel</a>, <a href="output/Ext.Window.html" ext:cls="Ext.Window">Ext.Window</a> and <a href="output/Ext.TabPanel.html" ext:cls="Ext.TabPanel">Ext.TabPanel</a>.
+If you do not need the capabilities offered by the aforementioned classes you can create a lightweight
+Container to be encapsulated by an HTML element to your specifications by using the
+<code><b><a href="output/Ext.Component.html#Ext.Component-autoEl" ext:member="autoEl" ext:cls="Ext.Component">autoEl</a></b></code> config option. This is a useful technique when creating
+embedded <a href="output/Ext.layout.ColumnLayout.html" ext:cls="Ext.layout.ColumnLayout">column</a> layouts inside <a href="output/Ext.form.FormPanel.html" ext:cls="Ext.form.FormPanel">FormPanels</a>
+for example.</p>
+<p>The code below illustrates both how to explicitly create a Container, and how to implicitly
+create one using the <b><code><em>'container'</em></code></b> xtype:<pre><code><i>// explicitly create a Container</i>
+<b>var</b> embeddedColumns = <b>new</b> Ext.Container({
+ autoEl: <em>'div'</em>, <i>// This is the <b>default</b></i>
+ layout: <em>'column'</em>,
+ defaults: {
+ <i>// implicitly create Container by specifying xtype</i>
+ xtype: <em>'container'</em>,
+ autoEl: <em>'div'</em>, <i>// This is the <b>default</b>.</i>
+ layout: <em>'form'</em>,
+ columnWidth: 0.5,
+ style: {
+ padding: <em>'10px'</em>
+ }
+ },
+<i>// The two items below will be Ext.Containers, each encapsulated by a <DIV> element.</i>
+ items: [{
+ items: {
+ xtype: <em>'datefield'</em>,
+ name: <em>'startDate'</em>,
+ fieldLabel: <em>'Start date'</em>
+ }
+ }, {
+ items: {
+ xtype: <em>'datefield'</em>,
+ name: <em>'endDate'</em>,
+ fieldLabel: <em>'End date'</em>
+ }
+ }]
+});</code></pre></p>
+<p><u><b>Layout</b></u></p>
+<p>Container classes delegate the rendering of child Components to a layout
+manager class which must be configured into the Container using the
+<code><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></code> configuration property.</p>
+<p>When either specifying child <code><a href="output/Ext.Container.html#Ext.Container-items" ext:member="items" ext:cls="Ext.Container">items</a></code> of a Container,
+or dynamically <a href="output/Ext.Container.html#Ext.Container-add" ext:member="add" ext:cls="Ext.Container">adding</a> Components to a Container, remember to
+consider how you wish the Container to arrange those child elements, and
+whether those child elements need to be sized using one of Ext's built-in
+<b><code><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></code></b> schemes. By default, Containers use the
+<a href="output/Ext.layout.ContainerLayout.html" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a> scheme which only
+renders child components, appending them one after the other inside the
+Container, and <b>does not apply any sizing</b> at all.</p>
+<p>A common mistake is when a developer neglects to specify a
+<b><code><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></code></b> (e.g. widgets like GridPanels or
+TreePanels are added to Containers for which no <code><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></code>
+has been specified). If a Container is left to use the default
+<a href="output/Ext.layout.ContainerLayout.html" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a> scheme, none of its
+child components will be resized, or changed in any way when the Container
+is resized.</p>
+<p>Certain layout managers allow dynamic addition of child components.
+Those that do include <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a>,
+<a href="output/Ext.layout.AnchorLayout.html" ext:cls="Ext.layout.AnchorLayout">Ext.layout.AnchorLayout</a>, <a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>, and
+<a href="output/Ext.layout.TableLayout.html" ext:cls="Ext.layout.TableLayout">Ext.layout.TableLayout</a>. For example:<pre><code><i>// Create the GridPanel.</i>
+<b>var</b> myNewGrid = <b>new</b> Ext.grid.GridPanel({
+ store: myStore,
+ columns: myColumnModel,
+ title: <em>'Results'</em>, <i>// the title becomes the title of the tab</i>
+});
+
+myTabPanel.add(myNewGrid); <i>// <a href="output/Ext.TabPanel.html" ext:cls="Ext.TabPanel">Ext.TabPanel</a> implicitly uses <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">CardLayout</a></i>
+myTabPanel.<a href="output/Ext.TabPanel.html#Ext.TabPanel-setActiveTab" ext:member="setActiveTab" ext:cls="Ext.TabPanel">setActiveTab</a>(myNewGrid);</code></pre></p>
+<p>The example above adds a newly created GridPanel to a TabPanel. Note that
+a TabPanel uses <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a> as its layout manager which
+means all its child items are sized to <a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout">fit</a>
+exactly into its client area.
+<p><b><u>Overnesting is a common problem</u></b>.
+An example of overnesting occurs when a GridPanel is added to a TabPanel
+by wrapping the GridPanel <i>inside</i> a wrapping Panel (that has no
+<code><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></code> specified) and then add that wrapping Panel
+to the TabPanel. The point to realize is that a GridPanel <b>is</b> a
+Component which can be added directly to a Container. If the wrapping Panel
+has no <code><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></code> configuration, then the overnested
+GridPanel will not be sized as expected.<p>
+<p><u><b>Adding via remote configuration</b></u></p>
+<p>A server side script can be used to add Components which are generated dynamically on the server.
+An example of adding a GridPanel to a TabPanel where the GridPanel is generated by the server
+based on certain parameters:
+</p><pre><code><i>// execute an Ajax request to invoke server side script:</i>
+Ext.Ajax.request({
+ url: <em>'gen-invoice-grid.php'</em>,
+ <i>// send additional parameters to instruct server script</i>
+ params: {
+ startDate: Ext.getCmp(<em>'start-date'</em>).getValue(),
+ endDate: Ext.getCmp(<em>'end-date'</em>).getValue()
+ },
+ <i>// process the response object to add it to the TabPanel:</i>
+ success: <b>function</b>(xhr) {
+ <b>var</b> newComponent = eval(xhr.responseText); <i>// see discussion below</i>
+ myTabPanel.add(newComponent); <i>// add the component to the TabPanel</i>
+ myTabPanel.setActiveTab(newComponent);
+ },
+ failure: <b>function</b>() {
+ Ext.Msg.alert(<em>"Grid create failed"</em>, <em>"Server communication failure"</em>);
+ }
+});</code></pre>
+<p>The server script needs to return an executable Javascript statement which, when processed
+using <code>eval()</code>, will return either a config object with an <a href="output/Ext.Component.html#Ext.Component-xtype" ext:member="xtype" ext:cls="Ext.Component">xtype</a>,
+or an instantiated Component. The server might return this for example:</p><pre><code>(<b>function</b>() {
+ <b>function</b> formatDate(value){
+ <b>return</b> value ? value.dateFormat(<em>'M d, Y'</em>) : <em>''</em>;
+ };
+
+ <b>var</b> store = <b>new</b> Ext.data.Store({
+ url: <em>'get-invoice-data.php'</em>,
+ baseParams: {
+ startDate: <em>'01/01/2008'</em>,
+ endDate: <em>'01/31/2008'</em>
+ },
+ reader: <b>new</b> Ext.data.JsonReader({
+ record: <em>'transaction'</em>,
+ idProperty: <em>'id'</em>,
+ totalRecords: <em>'total'</em>
+ }, [
+ <em>'customer'</em>,
+ <em>'invNo'</em>,
+ {name: <em>'date'</em>, type: <em>'date'</em>, dateFormat: <em>'m/d/Y'</em>},
+ {name: <em>'value'</em>, type: <em>'float'</em>}
+ ])
+ });
+
+ <b>var</b> grid = <b>new</b> Ext.grid.GridPanel({
+ title: <em>'Invoice Report'</em>,
+ bbar: <b>new</b> Ext.PagingToolbar(store),
+ store: store,
+ columns: [
+ {header: <em>"Customer"</em>, width: 250, dataIndex: <em>'customer'</em>, sortable: true},
+ {header: <em>"Invoice Number"</em>, width: 120, dataIndex: <em>'invNo'</em>, sortable: true},
+ {header: <em>"Invoice Date"</em>, width: 100, dataIndex: <em>'date'</em>, renderer: formatDate, sortable: true},
+ {header: <em>"Value"</em>, width: 120, dataIndex: <em>'value'</em>, renderer: <em>'usMoney'</em>, sortable: true}
+ ],
+ });
+ store.load();
+ <b>return</b> grid; <i>// <b>return</b> instantiated component</i>
+})();</code></pre>
+<p>When the above code fragment is passed through the <code>eval</code> function in the success handler
+of the Ajax request, the code is executed by the Javascript processor, and the anonymous function
+runs, and returns the instantiated grid component.</p>
+<p>Note: since the code above is <i>generated</i> by a server script, the <code>baseParams</code> for
+the Store, the metadata to allow generation of the Record layout, and the ColumnModel
+can all be generated into the code since these are all known on the server.</p></div><div class="hr"></div><a id="Ext.Container-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 "><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
+container's...</div><div class="long">A string component id or the numeric index of the component that should be initially activated within the
+container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
+item in the container's collection). activeItem only applies to layout styles that can display
+items one at a time (like <a href="output/Ext.layout.AccordionLayout.html" ext:cls="Ext.layout.AccordionLayout">Ext.layout.AccordionLayout</a>, <a href="output/Ext.layout.CardLayout.html" ext:cls="Ext.layout.CardLayout">Ext.layout.CardLayout</a> and
+<a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout">Ext.layout.FitLayout</a>). Related to <a href="output/Ext.layout.ContainerLayout.html#Ext.layout.ContainerLayout-activeItem" ext:member="activeItem" ext:cls="Ext.layout.ContainerLayout">Ext.layout.ContainerLayout.activeItem</a>.</div></div></td><td class="msource">Container</td></tr><tr class="config-row inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Component-allowDomMove"></a><b><a href="source/Component.html#cfg-Ext.Component-allowDomMove">allowDomMove</a></b> : Boolean<div class="mdesc">Whether the component can move the Dom node when rendering (defaults to true).</div></td><td class="msource"><a href="output/Ext.Component.html#allowDomMove" ext:member="#allowDomMove" ext:cls="Ext.Component">Component</a></td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.BoxComponent-anchor"></a><b><a href="source/BoxComponent.html#cfg-Ext.BoxComponent-anchor">anchor</a></b> : String<div class="mdesc"><div class="short">Note: this config is only used when this Component is rendered
git.ithinksw.org / extjs.git / blobdiff