docs/api/Ext.layout.container.Card.html

   1 <!DOCTYPE html><html><head><title>Ext.layout.container.Card | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.layout.container.Card',
  13         docClass: 'Ext.layout.container.Card',
  14         docReq: 'Ext.layout.container.Card',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'Card.html#Ext-layout.container.Card';
  33     clsInfo = {"methods":["getActiveItem","getLayoutItems","getNext","getPrev","getRenderTarget","getTarget","next","prev"],"cfgs":["bindToOwnerCtComponent","bindToOwnerCtContainer","deferredRender","itemCls"],"properties":[],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Card.html#Ext-layout.container.Card" target="_blank">Ext.layout.container.Card</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.layout.Layout.html" rel="Ext.layout.Layout" class="cls docClass">Ext.layout.Layout</a><div class="subclass"><a href="Ext.layout.container.AbstractContainer.html" rel="Ext.layout.container.AbstractContainer" class="cls docClass">Ext.layout.container.AbstractContainer</a><div class="subclass"><a href="Ext.layout.container.Container.html" rel="Ext.layout.container.Container" class="cls docClass">Ext.layout.container.Container</a><div class="subclass"><a href="Ext.layout.container.AbstractFit.html" rel="Ext.layout.container.AbstractFit" class="cls docClass">Ext.layout.container.AbstractFit</a><div class="subclass"><a href="Ext.layout.container.Fit.html" rel="Ext.layout.container.Fit" class="cls docClass">Ext.layout.container.Fit</a><div class="subclass"><a href="Ext.layout.container.AbstractCard.html" rel="Ext.layout.container.AbstractCard" class="cls docClass">Ext.layout.container.AbstractCard</a><div class="subclass"><strong>Ext.layout.container.Card</strong></div></div></div></div></div></div></div></pre><p>This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be
  38 visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
  39 This class is intended to be extended or created via the layout:'card' <a href="Ext.container.Container.html#layout" rel="Ext.container.Container#layout" class="docClass">Ext.container.Container.layout</a> config,
  40 and should generally not need to be created directly via the new keyword.</p>
  41
  42
  43 <p>The CardLayout's focal method is <a href="Ext.layout.container.Card.html#setActiveItem" rel="Ext.layout.container.Card#setActiveItem" class="docClass">setActiveItem</a>.  Since only one panel is displayed at a time,
  44 the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
  45 the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
  46 so that functionality must be provided by the developer.</p>
  47
  48
  49 <p>In the following example, a simplistic wizard setup is demonstrated.  A button bar is added
  50 to the footer of the containing panel to provide navigation buttons.  The buttons will be handled by a
  51 common navigation routine -- for this example, the implementation of that routine has been ommitted since
  52 it can be any type of custom logic.  Note that other uses of a CardLayout (like a tab control) would require a
  53 completely different implementation.  For serious implementations, a better approach would be to extend
  54 CardLayout to provide the custom functionality needed.
  55 <img class="screenshot" src="../Ext.layout.container.Card.png" alt="Ext.layout.container.Card container layout" />
  56 Example usage:</p>
  57
  58
  59 <pre class="prettyprint"><code>    var navHandler = function(direction){
  60          // This routine could contain business logic required to manage the navigation steps.
  61          // It would call setActiveItem as needed, manage navigation button state, handle any
  62          // branching logic that might be required, handle alternate actions like cancellation
  63          // or finalization, etc.  A complete wizard implementation could get pretty
  64          // sophisticated depending on the complexity required, and should probably be
  65          // done as a subclass of CardLayout in a real-world implementation.
  66      };
  67
  68     Ext.create('Ext.panel.Panel', {
  69         title: 'Example Wizard',
  70         width: 300,
  71         height: 200,
  72         layout: 'card',
  73         activeItem: 0, // make sure the active item is set on the container config!
  74         bodyStyle: 'padding:15px',
  75         defaults: {
  76             // applied to each contained panel
  77             border:false
  78         },
  79         // just an example of one possible navigation scheme, using buttons
  80         bbar: [
  81         {
  82             id: 'move-prev',
  83             text: 'Back',
  84             handler: navHandler(this, [-1]),
  85             disabled: true
  86         },
  87         '->', // greedy spacer so that the buttons are aligned to each side
  88         {
  89             id: 'move-next',
  90             text: 'Next',
  91             handler: navHandler(this, [1])
  92         }],
  93         // the panels (or "cards") within the layout
  94         items: [{
  95             id: 'card-0',
  96             html: '&lt;h1&gt;Welcome to the Wizard!&lt;/h1&gt;&lt;p&gt;Step 1 of 3&lt;/p&gt;'
  97         },{
  98             id: 'card-1',
  99             html: '&lt;p&gt;Step 2 of 3&lt;/p&gt;'
 100         },{
 101             id: 'card-2',
 102             html: '&lt;h1&gt;Congratulations!&lt;/h1&gt;&lt;p&gt;Step 3 of 3 - Complete&lt;/p&gt;'
 103         }],
 104         renderTo: Ext.getBody()
 105     });
 106  </code></pre>
 107
 108 <div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">CSS Class configs</h4><div id="config-itemCls" class="member f inherited"><a href="Ext.layout.container.Card.html#config-itemCls" rel="config-itemCls" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-itemCls" class="viewSource">view source</a></div><a name="itemCls"></a><a name="config-itemCls"></a><a href="Ext.layout.container.Card.html#" rel="config-itemCls" class="cls expand">itemCls</a><span> : String</span></div><div class="description"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
 109 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
 110 customized styles to the container or any of its children using standard CSS rules. See
 111 <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a>.<a href="Ext.Component.html#ctCls" rel="Ext.Component#ctCls" class="docClass">ctCls</a> also.</p>
 112
 113
 114 <p></p></p>
 115 </div></div></div><h4 class="cfgGroup">Other Configs</h4><div id="config-bindToOwnerCtComponent" class="member f inherited"><a href="Ext.layout.container.Card.html#config-bindToOwnerCtComponent" rel="config-bindToOwnerCtComponent" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-bindToOwnerCtComponent" class="viewSource">view source</a></div><a name="bindToOwnerCtComponent"></a><a name="config-bindToOwnerCtComponent"></a><a href="Ext.layout.container.Card.html#" rel="config-bindToOwnerCtComponent" class="cls expand">bindToOwnerCtComponent</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Flag to notify the ownerCt Component on afterLayout of a change</p>
 116 </div><div class="long"><p>Flag to notify the ownerCt Component on afterLayout of a change</p>
 117 </div></div></div><div id="config-bindToOwnerCtContainer" class="member inherited"><a href="Ext.layout.container.Card.html#config-bindToOwnerCtContainer" rel="config-bindToOwnerCtContainer" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-bindToOwnerCtContainer" class="viewSource">view source</a></div><a name="bindToOwnerCtContainer"></a><a name="config-bindToOwnerCtContainer"></a><a href="Ext.layout.container.Card.html#" rel="config-bindToOwnerCtContainer" class="cls expand">bindToOwnerCtContainer</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Flag to notify the ownerCt Container on afterLayout of a change</p>
 118 </div><div class="long"><p>Flag to notify the ownerCt Container on afterLayout of a change</p>
 119 </div></div></div><div id="config-deferredRender" class="member inherited"><a href="Ext.layout.container.Card.html#config-deferredRender" rel="config-deferredRender" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractCard.html" class="definedIn docClass">Ext.layout.container.AbstractCard</a><br/><a href="../source/AbstractCard.html#Ext-layout.container.AbstractCard-cfg-deferredRender" class="viewSource">view source</a></div><a name="deferredRender"></a><a name="config-deferredRender"></a><a href="Ext.layout.container.Card.html#" rel="config-deferredRender" class="cls expand">deferredRender</a><span> : Boolean</span></div><div class="description"><div class="short">True to render each contained item at the time it becomes active, false to render all contained items
 120 as soon as the ...</div><div class="long"><p>True to render each contained item at the time it becomes active, false to render all contained items
 121 as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
 122 a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
 123 true might improve performance.</p>
 124 </div></div></div><div id="config-itemCls" class="member inherited"><a href="Ext.layout.container.Card.html#config-itemCls" rel="config-itemCls" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-cfg-itemCls" class="viewSource">view source</a></div><a name="itemCls"></a><a name="config-itemCls"></a><a href="Ext.layout.container.Card.html#" rel="config-itemCls" class="cls expand">itemCls</a><span> : String</span></div><div class="description"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
 125 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
 126 customized styles to the container or any of its children using standard CSS rules. See
 127 <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a>.<a href="Ext.Component.html#ctCls" rel="Ext.Component#ctCls" class="docClass">ctCls</a> also.</p>
 128
 129
 130 <p></p></p>
 131 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-getActiveItem" class="member f inherited"><a href="Ext.layout.container.Card.html#method-getActiveItem" rel="method-getActiveItem" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractCard.html" class="definedIn docClass">Ext.layout.container.AbstractCard</a><br/><a href="../source/AbstractCard.html#Ext-layout.container.AbstractCard-method-getActiveItem" class="viewSource">view source</a></div><a name="getActiveItem"></a><a name="method-getActiveItem"></a><a href="Ext.layout.container.Card.html#" rel="method-getActiveItem" class="cls expand">getActiveItem</a> : Ext.Component</div><div class="description"><div class="short"><p>Return the active (visible) component in the layout.</p>
 132 </div><div class="long"><p>Return the active (visible) component in the layout.</p>
 133 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Component</span>&nbsp; &nbsp;
 134 </li></ul></div></div></div><div id="method-getLayoutItems" class="member inherited"><a href="Ext.layout.container.Card.html#method-getLayoutItems" rel="method-getLayoutItems" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getLayoutItems" class="viewSource">view source</a></div><a name="getLayoutItems"></a><a name="method-getLayoutItems"></a><a href="Ext.layout.container.Card.html#" rel="method-getLayoutItems" class="cls expand">getLayoutItems</a> : Array</div><div class="description"><div class="short">Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's
 135 ...</div><div class="long"><p>Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's
 136 base class), or the layout phase (onLayout).</p>
 137
 138 <h3 class="pa">Returns</h3><ul><li><span class="pre">Array</span>&nbsp; &nbsp;<p>of child components</p>
 139 </li></ul></div></div></div><div id="method-getNext" class="member inherited"><a href="Ext.layout.container.Card.html#method-getNext" rel="method-getNext" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractCard.html" class="definedIn docClass">Ext.layout.container.AbstractCard</a><br/><a href="../source/AbstractCard.html#Ext-layout.container.AbstractCard-method-getNext" class="viewSource">view source</a></div><a name="getNext"></a><a name="method-getNext"></a><a href="Ext.layout.container.Card.html#" rel="method-getNext" class="cls expand">getNext</a>(
 140 <span class="pre">Object wrap</span>)
 141  : Ext.Component</div><div class="description"><div class="short"><p>Return the active (visible) component in the layout to the next card</p>
 142 </div><div class="long"><p>Return the active (visible) component in the layout to the next card</p>
 143 <h3 class="pa">Parameters</h3><ul><li><span class="pre">wrap</span> : Object<div class="sub-desc">
 144 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Component</span>&nbsp; &nbsp;
 145 </li></ul></div></div></div><div id="method-getPrev" class="member inherited"><a href="Ext.layout.container.Card.html#method-getPrev" rel="method-getPrev" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractCard.html" class="definedIn docClass">Ext.layout.container.AbstractCard</a><br/><a href="../source/AbstractCard.html#Ext-layout.container.AbstractCard-method-getPrev" class="viewSource">view source</a></div><a name="getPrev"></a><a name="method-getPrev"></a><a href="Ext.layout.container.Card.html#" rel="method-getPrev" class="cls expand">getPrev</a>(
 146 <span class="pre">Object wrap</span>)
 147  : Ext.Component</div><div class="description"><div class="short"><p>Return the active (visible) component in the layout to the previous card</p>
 148 </div><div class="long"><p>Return the active (visible) component in the layout to the previous card</p>
 149 <h3 class="pa">Parameters</h3><ul><li><span class="pre">wrap</span> : Object<div class="sub-desc">
 150 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Component</span>&nbsp; &nbsp;
 151 </li></ul></div></div></div><div id="method-getRenderTarget" class="member inherited"><a href="Ext.layout.container.Card.html#method-getRenderTarget" rel="method-getRenderTarget" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getRenderTarget" class="viewSource">view source</a></div><a name="getRenderTarget"></a><a name="method-getRenderTarget"></a><a href="Ext.layout.container.Card.html#" rel="method-getRenderTarget" class="cls expand">getRenderTarget</a> : Ext.core.Element</div><div class="description"><div class="short">Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.tar...</div><div class="long"><p>Returns the element into which rendering must take place. Defaults to the owner Container's <a href="Ext.AbstractComponent.html#targetEl" rel="Ext.AbstractComponent#targetEl" class="docClass">Ext.AbstractComponent.targetEl</a>.</p>
 152
 153
 154 <p>May be overridden in layout managers which implement an inner element.</p>
 155 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 156 </li></ul></div></div></div><div id="method-getTarget" class="member inherited"><a href="Ext.layout.container.Card.html#method-getTarget" rel="method-getTarget" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractContainer.html" class="definedIn docClass">Ext.layout.container.AbstractContainer</a><br/><a href="../source/AbstractContainer2.html#Ext-layout.container.AbstractContainer-method-getTarget" class="viewSource">view source</a></div><a name="getTarget"></a><a name="method-getTarget"></a><a href="Ext.layout.container.Card.html#" rel="method-getTarget" class="cls expand">getTarget</a> : Ext.core.Element</div><div class="description"><div class="short"><p>Returns the owner component's resize element.</p>
 157 </div><div class="long"><p>Returns the owner component's resize element.</p>
 158 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 159 </li></ul></div></div></div><div id="method-next" class="member inherited"><a href="Ext.layout.container.Card.html#method-next" rel="method-next" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractCard.html" class="definedIn docClass">Ext.layout.container.AbstractCard</a><br/><a href="../source/AbstractCard.html#Ext-layout.container.AbstractCard-method-next" class="viewSource">view source</a></div><a name="next"></a><a name="method-next"></a><a href="Ext.layout.container.Card.html#" rel="method-next" class="cls expand">next</a>(
 160 <span class="pre">Object anim, Object wrap</span>)
 161  : void</div><div class="description"><div class="short"><p>Sets the active (visible) component in the layout to the next card</p>
 162 </div><div class="long"><p>Sets the active (visible) component in the layout to the next card</p>
 163 <h3 class="pa">Parameters</h3><ul><li><span class="pre">anim</span> : Object<div class="sub-desc">
 164 </div></li><li><span class="pre">wrap</span> : Object<div class="sub-desc">
 165 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 166 </li></ul></div></div></div><div id="method-prev" class="member inherited"><a href="Ext.layout.container.Card.html#method-prev" rel="method-prev" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.AbstractCard.html" class="definedIn docClass">Ext.layout.container.AbstractCard</a><br/><a href="../source/AbstractCard.html#Ext-layout.container.AbstractCard-method-prev" class="viewSource">view source</a></div><a name="prev"></a><a name="method-prev"></a><a href="Ext.layout.container.Card.html#" rel="method-prev" class="cls expand">prev</a>(
 167 <span class="pre">Object anim, Object wrap</span>)
 168  : void</div><div class="description"><div class="short"><p>Sets the active (visible) component in the layout to the previous card</p>
 169 </div><div class="long"><p>Sets the active (visible) component in the layout to the previous card</p>
 170 <h3 class="pa">Parameters</h3><ul><li><span class="pre">anim</span> : Object<div class="sub-desc">
 171 </div></li><li><span class="pre">wrap</span> : Object<div class="sub-desc">
 172 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 173 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>