-<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a> <img src="resources/elbow-end.gif"><a href="output/Ext.layout.FitLayout.html" ext:member="" ext:cls="Ext.layout.FitLayout">FitLayout</a> <img src="resources/elbow-end.gif">CardLayout</pre></div><h1>Class <a href="source/CardLayout.html#cls-Ext.layout.CardLayout">Ext.layout.CardLayout</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">CardLayout.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/CardLayout.html#cls-Ext.layout.CardLayout">CardLayout</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout" ext:member="">FitLayout</a></td></tr></table><div class="description"><p>This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be\r
-visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.\r
-This class is intended to be extended or created via the layout:'card' <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">Ext.Container.layout</a> config,\r
-and should generally not need to be created directly via the new keyword.</p>\r
-<p>The CardLayout's focal method is <a href="output/Ext.layout.CardLayout.html#Ext.layout.CardLayout-setActiveItem" ext:member="setActiveItem" ext:cls="Ext.layout.CardLayout">setActiveItem</a>. Since only one panel is displayed at a time,\r
-the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of\r
-the next panel to display. The layout itself does not provide a user interface for handling this navigation,\r
-so that functionality must be provided by the developer.</p>\r
-<p>In the following example, a simplistic wizard setup is demonstrated. A button bar is added\r
-to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a\r
-common navigation routine -- for this example, the implementation of that routine has been ommitted since\r
-it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a\r
-completely different implementation. For serious implementations, a better approach would be to extend\r
-CardLayout to provide the custom functionality needed. Example usage:</p>\r
-<pre><code><b>var</b> navHandler = <b>function</b>(direction){\r
- <i>// This routine could contain business logic required to manage the navigation steps.\r</i>
- <i>// It would call setActiveItem as needed, manage navigation button state, handle any\r</i>
- <i>// branching logic that might be required, handle alternate actions like cancellation\r</i>
- <i>// or finalization, etc. A complete wizard implementation could get pretty\r</i>
- <i>// sophisticated depending on the complexity required, and should probably be\r</i>
- <i>// done as a subclass of CardLayout <b>in</b> a real-world implementation.\r</i>
-};\r
-\r
-<b>var</b> card = <b>new</b> Ext.Panel({\r
- title: <em>'Example Wizard'</em>,\r
- layout:<em>'card'</em>,\r
- activeItem: 0, <i>// make sure the active item is set on the container config!\r</i>
- bodyStyle: <em>'padding:15px'</em>,\r
- defaults: {\r
- <i>// applied to each contained panel\r</i>
- border:false\r
- },\r
- <i>// just an example of one possible navigation scheme, using buttons\r</i>
- bbar: [\r
- {\r
- id: <em>'move-prev'</em>,\r
- text: <em>'Back'</em>,\r
- handler: navHandler.createDelegate(this, [-1]),\r
- disabled: true\r
- },\r
- <em>'->'</em>, <i>// greedy spacer so that the buttons are aligned to each side\r</i>
- {\r
- id: <em>'move-next'</em>,\r
- text: <em>'Next'</em>,\r
- handler: navHandler.createDelegate(this, [1])\r
- }\r
- ],\r
- <i>// the panels (or <em>"cards"</em>) within the layout\r</i>
- items: [{\r
- id: <em>'card-0'</em>,\r
- html: <em>'<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'</em>\r
- },{\r
- id: <em>'card-1'</em>,\r
- html: <em>'<p>Step 2 of 3</p>'</em>\r
- },{\r
- id: <em>'card-2'</em>,\r
- html: <em>'<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'</em>\r
- }]\r
-});</code></pre></div><div class="hr"></div><a id="Ext.layout.CardLayout-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.layout.CardLayout-deferredRender"></a><b><a href="source/CardLayout.html#cfg-Ext.layout.CardLayout-deferredRender">deferredRender</a></b> : Boolean<div class="mdesc"><div class="short">True to render each contained item at the time it becomes active, false to render all contained items
-as soon as the...</div><div class="long">True to render each contained item at the time it becomes active, false to render all contained items\r
-as soon as the layout is rendered (defaults to false). If there is a significant amount of content or\r
-a lot of heavy controls being rendered into panels that are not displayed by default, setting this to\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.layout.CardLayout-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.layout.CardLayout-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.layout.CardLayout-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.layout.CardLayout-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.layout.CardLayout"><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.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.layout.FitLayout.html" ext:member="" ext:cls="Ext.layout.FitLayout">FitLayout</a>
+ <img src="resources/elbow-end.gif">CardLayout</pre></div><h1>Class <a href="source/CardLayout.html#cls-Ext.layout.CardLayout">Ext.layout.CardLayout</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/CardLayout.html#cls-Ext.layout.CardLayout">CardLayout.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/CardLayout.html#cls-Ext.layout.CardLayout">CardLayout</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout" ext:member="">FitLayout</a></td></tr></table><div class="description"><p>This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
+visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.
+This class is intended to be extended or created via the layout:'card' <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">Ext.Container.layout</a> config,
+and should generally not need to be created directly via the new keyword.</p>
+<p>The CardLayout's focal method is <a href="output/Ext.layout.CardLayout.html#Ext.layout.CardLayout-setActiveItem" ext:member="setActiveItem" ext:cls="Ext.layout.CardLayout">setActiveItem</a>. Since only one panel is displayed at a time,
+the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
+the next panel to display. The layout itself does not provide a user interface for handling this navigation,
+so that functionality must be provided by the developer.</p>
+<p>In the following example, a simplistic wizard setup is demonstrated. A button bar is added
+to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a
+common navigation routine -- for this example, the implementation of that routine has been ommitted since
+it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a
+completely different implementation. For serious implementations, a better approach would be to extend
+CardLayout to provide the custom functionality needed. Example usage:</p>
+<pre><code><b>var</b> navHandler = <b>function</b>(direction){
+ <i>// This routine could contain business logic required to manage the navigation steps.</i>
+ <i>// It would call setActiveItem as needed, manage navigation button state, handle any</i>
+ <i>// branching logic that might be required, handle alternate actions like cancellation</i>
+ <i>// or finalization, etc. A complete wizard implementation could get pretty</i>
+ <i>// sophisticated depending on the complexity required, and should probably be</i>
+ <i>// done as a subclass of CardLayout <b>in</b> a real-world implementation.</i>
+};
+
+<b>var</b> card = <b>new</b> Ext.Panel({
+ title: <em>'Example Wizard'</em>,
+ layout:<em>'card'</em>,
+ activeItem: 0, <i>// make sure the active item is set on the container config!</i>
+ bodyStyle: <em>'padding:15px'</em>,
+ defaults: {
+ <i>// applied to each contained panel</i>
+ border:false
+ },
+ <i>// just an example of one possible navigation scheme, using buttons</i>
+ bbar: [
+ {
+ id: <em>'move-prev'</em>,
+ text: <em>'Back'</em>,
+ handler: navHandler.createDelegate(this, [-1]),
+ disabled: true
+ },
+ <em>'->'</em>, <i>// greedy spacer so that the buttons are aligned to each side</i>
+ {
+ id: <em>'move-next'</em>,
+ text: <em>'Next'</em>,
+ handler: navHandler.createDelegate(this, [1])
+ }
+ ],
+ <i>// the panels (or <em>"cards"</em>) within the layout</i>
+ items: [{
+ id: <em>'card-0'</em>,
+ html: <em>'<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'</em>
+ },{
+ id: <em>'card-1'</em>,
+ html: <em>'<p>Step 2 of 3</p>'</em>
+ },{
+ id: <em>'card-2'</em>,
+ html: <em>'<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'</em>
+ }]
+});</code></pre></div><div class="hr"></div><a id="Ext.layout.CardLayout-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.layout.CardLayout-deferredRender"></a><b><a href="source/CardLayout.html#cfg-Ext.layout.CardLayout-deferredRender">deferredRender</a></b> : Boolean<div class="mdesc"><div class="short">True to render each contained item at the time it becomes active, false to render all contained items
+as soon as the ...</div><div class="long">True to render each contained item at the time it becomes active, false to render all contained items
+as soon as the layout is rendered (defaults to false). If there is a significant amount of content or
+a lot of heavy controls being rendered into panels that are not displayed by default, setting this to