docs/output/Ext.layout.CardLayout.html

   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>&#13;<a class="inner-link" href="#Ext.layout.CardLayout-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>&#13;<a class="inner-link" href="#Ext.layout.CardLayout-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>&#13;<a class="inner-link" href="#Ext.layout.CardLayout-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>&#13;<a class="bookmark" href="../docs/?class=Ext.layout.CardLayout"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>&#13;</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>&#13;&nbsp;&nbsp;<img src="resources/elbow-end.gif"><a href="output/Ext.layout.FitLayout.html" ext:member="" ext:cls="Ext.layout.FitLayout">FitLayout</a>&#13;&nbsp;&nbsp;&nbsp;&nbsp;<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
   2 visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
   3 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,
   4 and 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,
   6 the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
   7 the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
   8 so 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
  10 to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a
  11 common navigation routine -- for this example, the implementation of that routine has been ommitted since
  12 it can be any type of custom logic.  Note that other uses of a CardLayout (like a tab control) would require a
  13 completely different implementation.  For serious implementations, a better approach would be to extend
  14 CardLayout 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>'&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;'</em>
  52     },{
  53         id: <em>'card-1'</em>,
  54         html: <em>'&lt;p&gt;Step 2 of 3&lt;/p&gt;'</em>
  55     },{
  56         id: <em>'card-2'</em>,
  57         html: <em>'&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;'</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">&nbsp;</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
  60 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
  61 as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
  62 a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
  63 true 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">&nbsp;</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
  64 customized 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
  65 customized 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
  68 which 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>
  74 To configure the above Classes with an extra CSS class append to the default.  For example,
  75 for 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">&nbsp;</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">&nbsp;</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') { ... }
  77 a...</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>
  80 and <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">&nbsp;</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
  81 Ext.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,
  83 labeled and styled form Field. A default Template is supplied, but this may be
  84 overriden 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">&nbsp;</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
  86 with the Container version which hooks onWindowRes...</div><div class="long">This monitorResize flag will be renamed soon as to avoid confusion
  87 with the Container version which hooks onWindowResize to doLayout
  88 monitorResize flag in this context attaches the resize event between
  89 a 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">&nbsp;</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>(&nbsp;<code>Number|String&nbsp;v</code>&nbsp;)
  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">&nbsp;</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>(&nbsp;<code>String/Number&nbsp;item</code>&nbsp;)
  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>