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

   1 <!DOCTYPE html><html><head><title>Ext.layout.container.AbstractCard | 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.AbstractCard',
  13         docClass: 'Ext.layout.container.AbstractCard',
  14         docReq: 'Ext.layout.container.AbstractCard',
  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 = 'AbstractCard.html#Ext-layout.container.AbstractCard';
  33     clsInfo = {"methods":["getActiveItem","getLayoutItems","getNext","getPrev","getRenderTarget","getTarget","next","prev"],"cfgs":["bindToOwnerCtComponent","bindToOwnerCtContainer","deferredRender","itemCls"],"properties":[],"events":[],"subclasses":["Ext.layout.container.Card"]};
  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/AbstractCard.html#Ext-layout.container.AbstractCard" target="_blank">Ext.layout.container.AbstractCard</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"><strong>Ext.layout.container.AbstractCard</strong></div></div></div></div></div></div></pre><p>This layout manages multiple child Components, each is fit to the Container, where only a single child Component
  38 can be 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.AbstractCard.html#setActiveItem" rel="Ext.layout.container.AbstractCard#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>Containers that are configured with a card layout will have a method setActiveItem dynamically added to it.
  50 <pre class="prettyprint"><code>      var p = new Ext.panel.Panel({
  51           fullscreen: true,
  52           layout: 'card',
  53           items: [{
  54               html: 'Card 1'
  55           },{
  56               html: 'Card 2'
  57           }]
  58       });
  59       p.setActiveItem(1);
  60    </code></pre>
  61 </p>
  62
  63 <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.AbstractCard.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.AbstractCard.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
  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="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>
  67
  68
  69 <p></p></p>
  70 </div></div></div><h4 class="cfgGroup">Other Configs</h4><div id="config-bindToOwnerCtComponent" class="member f inherited"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.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>
  71 </div><div class="long"><p>Flag to notify the ownerCt Component on afterLayout of a change</p>
  72 </div></div></div><div id="config-bindToOwnerCtContainer" class="member inherited"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.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>
  73 </div><div class="long"><p>Flag to notify the ownerCt Container on afterLayout of a change</p>
  74 </div></div></div><div id="config-deferredRender" class="member ni"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.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
  75 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
  76 as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
  77 a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
  78 true might improve performance.</p>
  79 </div></div></div><div id="config-itemCls" class="member inherited"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.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
  80 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
  81 customized styles to the container or any of its children using standard CSS rules. See
  82 <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>
  83
  84
  85 <p></p></p>
  86 </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 ni"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.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>
  87 </div><div class="long"><p>Return the active (visible) component in the layout.</p>
  88 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Component</span>&nbsp; &nbsp;
  89 </li></ul></div></div></div><div id="method-getLayoutItems" class="member inherited"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.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
  90 ...</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
  91 base class), or the layout phase (onLayout).</p>
  92
  93 <h3 class="pa">Returns</h3><ul><li><span class="pre">Array</span>&nbsp; &nbsp;<p>of child components</p>
  94 </li></ul></div></div></div><div id="method-getNext" class="member ni"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.html#" rel="method-getNext" class="cls expand">getNext</a>(
  95 <span class="pre">Object wrap</span>)
  96  : Ext.Component</div><div class="description"><div class="short"><p>Return the active (visible) component in the layout to the next card</p>
  97 </div><div class="long"><p>Return the active (visible) component in the layout to the next card</p>
  98 <h3 class="pa">Parameters</h3><ul><li><span class="pre">wrap</span> : Object<div class="sub-desc">
  99 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Component</span>&nbsp; &nbsp;
 100 </li></ul></div></div></div><div id="method-getPrev" class="member ni"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.html#" rel="method-getPrev" class="cls expand">getPrev</a>(
 101 <span class="pre">Object wrap</span>)
 102  : Ext.Component</div><div class="description"><div class="short"><p>Return the active (visible) component in the layout to the previous card</p>
 103 </div><div class="long"><p>Return the active (visible) component in the layout to the previous card</p>
 104 <h3 class="pa">Parameters</h3><ul><li><span class="pre">wrap</span> : Object<div class="sub-desc">
 105 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Component</span>&nbsp; &nbsp;
 106 </li></ul></div></div></div><div id="method-getRenderTarget" class="member inherited"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.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>
 107
 108
 109 <p>May be overridden in layout managers which implement an inner element.</p>
 110 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 111 </li></ul></div></div></div><div id="method-getTarget" class="member inherited"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.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>
 112 </div><div class="long"><p>Returns the owner component's resize element.</p>
 113 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 114 </li></ul></div></div></div><div id="method-next" class="member ni"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.html#" rel="method-next" class="cls expand">next</a>(
 115 <span class="pre">Object anim, Object wrap</span>)
 116  : void</div><div class="description"><div class="short"><p>Sets the active (visible) component in the layout to the next card</p>
 117 </div><div class="long"><p>Sets the active (visible) component in the layout to the next card</p>
 118 <h3 class="pa">Parameters</h3><ul><li><span class="pre">anim</span> : Object<div class="sub-desc">
 119 </div></li><li><span class="pre">wrap</span> : Object<div class="sub-desc">
 120 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 121 </li></ul></div></div></div><div id="method-prev" class="member ni"><a href="Ext.layout.container.AbstractCard.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.AbstractCard.html#" rel="method-prev" class="cls expand">prev</a>(
 122 <span class="pre">Object anim, Object wrap</span>)
 123  : void</div><div class="description"><div class="short"><p>Sets the active (visible) component in the layout to the previous card</p>
 124 </div><div class="long"><p>Sets the active (visible) component in the layout to the previous card</p>
 125 <h3 class="pa">Parameters</h3><ul><li><span class="pre">anim</span> : Object<div class="sub-desc">
 126 </div></li><li><span class="pre">wrap</span> : Object<div class="sub-desc">
 127 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 128 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>