/javascripts/lib/docs/output/Ext.layout.CardLayout.html
HTML | 95 lines | 94 code | 1 blank | 0 comment | 0 complexity | e17920ff622be9ac582705da4d8ce9d6 MD5 | raw file
Possible License(s): GPL-3.0
1<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 2visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc. 3This 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, 4and should generally not need to be created directly via the new keyword.</p> 5<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, 6the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of 7the next panel to display. The layout itself does not provide a user interface for handling this navigation, 8so that functionality must be provided by the developer.</p> 9<p>In the following example, a simplistic wizard setup is demonstrated. A button bar is added 10to the footer of the containing panel to provide navigation buttons. The buttons will be handled by a 11common navigation routine -- for this example, the implementation of that routine has been ommitted since 12it can be any type of custom logic. Note that other uses of a CardLayout (like a tab control) would require a 13completely different implementation. For serious implementations, a better approach would be to extend 14CardLayout to provide the custom functionality needed. Example usage:</p> 15<pre><code><b>var</b> navHandler = <b>function</b>(direction){ 16 <i>// This routine could contain business logic required to manage the navigation steps.</i> 17 <i>// It would call setActiveItem as needed, manage navigation button state, handle any</i> 18 <i>// branching logic that might be required, handle alternate actions like cancellation</i> 19 <i>// or finalization, etc. A complete wizard implementation could get pretty</i> 20 <i>// sophisticated depending on the complexity required, and should probably be</i> 21 <i>// done as a subclass of CardLayout <b>in</b> a real-world implementation.</i> 22}; 23 24<b>var</b> card = <b>new</b> Ext.Panel({ 25 title: <em>'Example Wizard'</em>, 26 layout:<em>'card'</em>, 27 activeItem: 0, <i>// make sure the active item is set on the container config!</i> 28 bodyStyle: <em>'padding:15px'</em>, 29 defaults: { 30 <i>// applied to each contained panel</i> 31 border:false 32 }, 33 <i>// just an example of one possible navigation scheme, using buttons</i> 34 bbar: [ 35 { 36 id: <em>'move-prev'</em>, 37 text: <em>'Back'</em>, 38 handler: navHandler.createDelegate(this, [-1]), 39 disabled: true 40 }, 41 <em>'->'</em>, <i>// greedy spacer so that the buttons are aligned to each side</i> 42 { 43 id: <em>'move-next'</em>, 44 text: <em>'Next'</em>, 45 handler: navHandler.createDelegate(this, [1]) 46 } 47 ], 48 <i>// the panels (or <em>"cards"</em>) within the layout</i> 49 items: [{ 50 id: <em>'card-0'</em>, 51 html: <em>'<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'</em> 52 },{ 53 id: <em>'card-1'</em>, 54 html: <em>'<p>Step 2 of 3</p>'</em> 55 },{ 56 id: <em>'card-2'</em>, 57 html: <em>'<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'</em> 58 }] 59});</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 60as 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 61as soon as the layout is rendered (defaults to false). If there is a significant amount of content or 62a lot of heavy controls being rendered into panels that are not displayed by default, setting this to 63true might improve performance.</div></div></td><td class="msource">CardLayout</td></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.ContainerLayout-extraCls"></a><b><a href="source/ContainerLayout.html#cfg-Ext.layout.ContainerLayout-extraCls">extraCls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding 64customized styles to t...</div><div class="long"><p>An optional extra CSS class that will be added to the container. This can be useful for adding 65customized styles to the container or any of its children using standard CSS rules. See 66<a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a>.<a href="output/Ext.Component.html#Ext.Component-ctCls" ext:member="ctCls" ext:cls="Ext.Component">ctCls</a> also.</p> 67<p><b>Note</b>: <tt>extraCls</tt> defaults to <tt>''</tt> except for the following classes 68which assign a value by default: 69<div class="mdetail-params"><ul> 70<li><a href="output/Ext.layout.AbsoluteLayout.html" ext:cls="Ext.layout.AbsoluteLayout">Absolute Layout</a> : <tt>'x-abs-layout-item'</tt></li> 71<li><a href="output/Ext.layout.Box.html" ext:cls="Ext.layout.Box">Box Layout</a> : <tt>'x-box-item'</tt></li> 72<li><a href="output/Ext.layout.ColumnLayout.html" ext:cls="Ext.layout.ColumnLayout">Column Layout</a> : <tt>'x-column'</tt></li> 73</ul></div> 74To configure the above Classes with an extra CSS class append to the default. For example, 75for ColumnLayout:<pre><code>extraCls: <em>'x-column custom-class'</em></code></pre> 76</p></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#extraCls" ext:member="#extraCls" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="config-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.CardLayout-layoutOnCardChange"></a><b><a href="source/CardLayout.html#cfg-Ext.layout.CardLayout-layoutOnCardChange">layoutOnCardChange</a></b> : Boolean<div class="mdesc">True to force a layout of the active item when the active card is changed. Defaults to false.</div></td><td class="msource">CardLayout</td></tr></tbody></table><a id="Ext.layout.CardLayout-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.ContainerLayout-activeItem"></a><b><a href="source/ContainerLayout.html#prop-Ext.layout.ContainerLayout-activeItem">activeItem</a></b> : Ext.Component<div class="mdesc"><div class="short">A reference to the Ext.Component that is active. For example, if(myPanel.layout.activeItem.id == 'item-1') { ... } 77a...</div><div class="long">A reference to the <a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a> that is active. For example, <pre><code><b>if</b>(myPanel.layout.activeItem.id == <em>'item-1'</em>) { ... }</code></pre> 78<tt>activeItem</tt> only applies to layout styles that can display items one at a time 79(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> 80and <a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout">Ext.layout.FitLayout</a>). Read-only. Related to <a href="output/Ext.Container.html#Ext.Container-activeItem" ext:member="activeItem" ext:cls="Ext.Container">Ext.Container.activeItem</a>.</div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#activeItem" ext:member="#activeItem" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.ContainerLayout-fieldTpl"></a><b><a href="source/ContainerLayout.html#prop-Ext.layout.ContainerLayout-fieldTpl">fieldTpl</a></b> : Ext.Template<div class="mdesc"><div class="short">The Ext.Template used by Field rendering layout classes (such as 81Ext.layout.FormLayout) to create the DOM structure o...</div><div class="long">The <a href="output/Ext.Template.html" ext:cls="Ext.Template">Ext.Template</a> used by Field rendering layout classes (such as 82<a href="output/Ext.layout.FormLayout.html" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout</a>) to create the DOM structure of a fully wrapped, 83labeled and styled form Field. A default Template is supplied, but this may be 84overriden to create custom field structures. The template processes values returned from 85<a href="output/Ext.layout.FormLayout.html#Ext.layout.FormLayout-getTemplateArgs" ext:member="getTemplateArgs" ext:cls="Ext.layout.FormLayout">Ext.layout.FormLayout.getTemplateArgs</a>.</div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#fieldTpl" ext:member="#fieldTpl" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="property-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.ContainerLayout-if"></a><b><a href="source/ContainerLayout.html#prop-Ext.layout.ContainerLayout-if">if</a></b> : Object<div class="mdesc"><div class="short">This monitorResize flag will be renamed soon as to avoid confusion 86with the Container version which hooks onWindowRes...</div><div class="long">This monitorResize flag will be renamed soon as to avoid confusion 87with the Container version which hooks onWindowResize to doLayout 88monitorResize flag in this context attaches the resize event between 89a container and it's layout</div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#if" ext:member="#if" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr></tbody></table><a id="Ext.layout.CardLayout-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.ContainerLayout-parseMargins"></a><b><a href="source/ContainerLayout.html#method-Ext.layout.ContainerLayout-parseMargins">parseMargins</a></b>( <code>Number|String v</code> ) 90 : 91 Object<div class="mdesc"><div class="short">Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations 92(e.g. 10, ...</div><div class="long">Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations 93(e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>v</code> : Number|String<div class="sub-desc">The encoded margins</div></li></ul><strong>Returns:</strong><ul><li><code>Object</code><div class="sub-desc">An object with margin sizes for top, right, bottom and left</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#parseMargins" ext:member="#parseMargins" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.CardLayout-setActiveItem"></a><b><a href="source/CardLayout.html#method-Ext.layout.CardLayout-setActiveItem">setActiveItem</a></b>( <code>String/Number item</code> ) 94 : 95 void<div class="mdesc"><div class="short">Sets the active (visible) item in the layout.</div><div class="long">Sets the active (visible) item in the layout.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>item</code> : String/Number<div class="sub-desc">The string component id or numeric index of the item to activate</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CardLayout</td></tr></tbody></table><a id="Ext.layout.CardLayout-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>