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

   1 <!DOCTYPE html><html><head><title>Ext.layout.container.Accordion | 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.Accordion',
  13         docClass: 'Ext.layout.container.Accordion',
  14         docReq: 'Ext.layout.container.Accordion',
  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 = 'Accordion.html#Ext-layout.container.Accordion';
  33     clsInfo = {"methods":["getLayoutItems","getRenderTarget","getTarget","updateChildBoxes"],"cfgs":["activeOnTop","align","animate","autoWidth","bindToOwnerCtComponent","bindToOwnerCtContainer","clearInnerCtOnLayout","collapseFirst","defaultMargins","fill","flex","hideCollapseTool","itemCls","multi","pack","padding","titleCollapse"],"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/Accordion.html#Ext-layout.container.Accordion" target="_blank">Ext.layout.container.Accordion</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.Box.html" rel="Ext.layout.container.Box" class="cls docClass">Ext.layout.container.Box</a><div class="subclass"><a href="Ext.layout.container.VBox.html" rel="Ext.layout.container.VBox" class="cls docClass">Ext.layout.container.VBox</a><div class="subclass"><strong>Ext.layout.container.Accordion</strong></div></div></div></div></div></div></pre><p>This is a layout that manages multiple Panels in an expandable accordion style such that only
  38 <b>one Panel can be expanded at any given time</b>. Each Panel has built-in support for expanding and collapsing.</p>
  39
  40
  41 <p>Note: Only Ext.Panels <b>and all subclasses of Ext.panel.Panel</b> may be used in an accordion layout Container.</p>
  42
  43
  44 <p><img class="screenshot" src="../Ext.layout.container.Accordion.png" alt="Ext.layout.container.Accordion container layout" /></p>
  45
  46 <p>Example usage:</p>
  47
  48
  49 <pre class="prettyprint"><code>Ext.create('Ext.panel.Panel', {
  50     title: 'Accordion Layout',
  51     width: 300,
  52     height: 300,
  53     layout:'accordion',
  54     defaults: {
  55         // applied to each contained panel
  56         bodyStyle: 'padding:15px'
  57     },
  58     layoutConfig: {
  59         // layout-specific configs go here
  60         titleCollapse: false,
  61         animate: true,
  62         activeOnTop: true
  63     },
  64     items: [{
  65         title: 'Panel 1',
  66         html: 'Panel content!'
  67     },{
  68         title: 'Panel 2',
  69         html: 'Panel content!'
  70     },{
  71         title: 'Panel 3',
  72         html: 'Panel content!'
  73     }],
  74     renderTo: Ext.getBody()
  75 });
  76 </code></pre>
  77
  78 <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.Accordion.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.Accordion.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
  79 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
  80 customized styles to the container or any of its children using standard CSS rules. See
  81 <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>
  82
  83
  84 <p></p></p>
  85 </div></div></div><h4 class="cfgGroup">Other Configs</h4><div id="config-activeOnTop" class="member f ni"><a href="Ext.layout.container.Accordion.html#config-activeOnTop" rel="config-activeOnTop" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Accordion.html" class="definedIn docClass">Ext.layout.container.Accordion</a><br/><a href="../source/Accordion.html#Ext-layout.container.Accordion-cfg-activeOnTop" class="viewSource">view source</a></div><a name="activeOnTop"></a><a name="config-activeOnTop"></a><a href="Ext.layout.container.Accordion.html#" rel="config-activeOnTop" class="cls expand">activeOnTop</a><span> : Boolean</span></div><div class="description"><div class="short">Not implemented in PR4.
  86
  87
  88 Only valid when {@link #multi" is false.
  89
  90
  91 True to swap the position of each panel as it is...</div><div class="long"><p><b>Not implemented in PR4.</b></p>
  92
  93
  94 <p>Only valid when {@link #multi" is <code>false</code>.</p>
  95
  96
  97 <p>True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
  98 false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).</p>
  99 </div></div></div><div id="config-align" class="member inherited"><a href="Ext.layout.container.Accordion.html#config-align" rel="config-align" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.VBox.html" class="definedIn docClass">Ext.layout.container.VBox</a><br/><a href="../source/VBox.html#Ext-layout.container.VBox-cfg-align" class="viewSource">view source</a></div><a name="align"></a><a name="config-align"></a><a href="Ext.layout.container.Accordion.html#" rel="config-align" class="cls expand">align</a><span> : String</span></div><div class="description"><div class="short">Controls how the child items of the container are aligned. Acceptable configuration values for this
 100 property are:
 101
 102
 103 l...</div><div class="long"><p>Controls how the child items of the container are aligned. Acceptable configuration values for this
 104 property are:</p>
 105
 106 <div class="mdetail-params"><ul>
 107 <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally
 108 at the <b>left</b> side of the container</div></li>
 109 <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the
 110 <b>mid-width</b> of the container</div></li>
 111 <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill
 112 the width of the container</div></li>
 113 <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to
 114 the size of the largest item.</div></li>
 115 </ul></div>
 116
 117 </div></div></div><div id="config-animate" class="member ni"><a href="Ext.layout.container.Accordion.html#config-animate" rel="config-animate" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Accordion.html" class="definedIn docClass">Ext.layout.container.Accordion</a><br/><a href="../source/Accordion.html#Ext-layout.container.Accordion-cfg-animate" class="viewSource">view source</a></div><a name="animate"></a><a name="config-animate"></a><a href="Ext.layout.container.Accordion.html#" rel="config-animate" class="cls expand">animate</a><span> : Boolean</span></div><div class="description"><div class="short">True to slide the contained panels open and closed during expand/collapse using animation, false to open and
 118 close di...</div><div class="long"><p>True to slide the contained panels open and closed during expand/collapse using animation, false to open and
 119 close directly with no animation (defaults to <code>true</code>). Note: The layout performs animated collapsing
 120 and expanding, <i>not</i> the child Panels.</p>
 121 </div></div></div><div id="config-autoWidth" class="member ni"><a href="Ext.layout.container.Accordion.html#config-autoWidth" rel="config-autoWidth" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Accordion.html" class="definedIn docClass">Ext.layout.container.Accordion</a><br/><a href="../source/Accordion.html#Ext-layout.container.Accordion-cfg-autoWidth" class="viewSource">view source</a></div><a name="autoWidth"></a><a name="config-autoWidth"></a><a href="Ext.layout.container.Accordion.html#" rel="config-autoWidth" class="cls expand">autoWidth</a><span> : Boolean</span></div><div class="description"><div class="short">This config is ignored in ExtJS 4.x.
 122
 123
 124 Child Panels have their width actively managed to fit within the accordion's w...</div><div class="long"><p><b>This config is ignored in ExtJS 4.x.</b></p>
 125
 126
 127 <p>Child Panels have their width actively managed to fit within the accordion's width.</p>
 128 </div></div></div><div id="config-bindToOwnerCtComponent" class="member inherited"><a href="Ext.layout.container.Accordion.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.Accordion.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>
 129 </div><div class="long"><p>Flag to notify the ownerCt Component on afterLayout of a change</p>
 130 </div></div></div><div id="config-bindToOwnerCtContainer" class="member inherited"><a href="Ext.layout.container.Accordion.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.Accordion.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>
 131 </div><div class="long"><p>Flag to notify the ownerCt Container on afterLayout of a change</p>
 132 </div></div></div><div id="config-clearInnerCtOnLayout" class="member inherited"><a href="Ext.layout.container.Accordion.html#config-clearInnerCtOnLayout" rel="config-clearInnerCtOnLayout" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Box.html" class="definedIn docClass">Ext.layout.container.Box</a><br/><a href="../source/Box.html#Ext-layout.container.Box-cfg-clearInnerCtOnLayout" class="viewSource">view source</a></div><a name="clearInnerCtOnLayout"></a><a name="config-clearInnerCtOnLayout"></a><a href="Ext.layout.container.Accordion.html#" rel="config-clearInnerCtOnLayout" class="cls expand">clearInnerCtOnLayout</a><span> : Boolean</span></div><div class="description"><div class="short"><p>&nbsp;</p></div><div class="long">
 133 </div></div></div><div id="config-collapseFirst" class="member ni"><a href="Ext.layout.container.Accordion.html#config-collapseFirst" rel="config-collapseFirst" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Accordion.html" class="definedIn docClass">Ext.layout.container.Accordion</a><br/><a href="../source/Accordion.html#Ext-layout.container.Accordion-cfg-collapseFirst" class="viewSource">view source</a></div><a name="collapseFirst"></a><a name="config-collapseFirst"></a><a href="Ext.layout.container.Accordion.html#" rel="config-collapseFirst" class="cls expand">collapseFirst</a><span> : Boolean</span></div><div class="description"><div class="short">True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
 134 in the cont...</div><div class="long"><p>True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
 135 in the contained Panels' title bars, false to render it last (defaults to false).</p>
 136 </div></div></div><div id="config-defaultMargins" class="member inherited"><a href="Ext.layout.container.Accordion.html#config-defaultMargins" rel="config-defaultMargins" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Box.html" class="definedIn docClass">Ext.layout.container.Box</a><br/><a href="../source/Box.html#Ext-layout.container.Box-cfg-defaultMargins" class="viewSource">view source</a></div><a name="defaultMargins"></a><a name="config-defaultMargins"></a><a href="Ext.layout.container.Accordion.html#" rel="config-defaultMargins" class="cls expand">defaultMargins</a><span> : Object</span></div><div class="description"><div class="short">If the individual contained items do not have a margins
 137 property specified or margin specified via CSS, the default m...</div><div class="long"><p>If the individual contained items do not have a <tt>margins</tt>
 138 property specified or margin specified via CSS, the default margins from this property will be
 139 applied to each item.</p>
 140
 141
 142 <br><p>This property may be specified as an object containing margins
 143
 144
 145 <p>to apply in the format:</p></p>
 146
 147 <pre><code>{
 148     top: (top margin),
 149     right: (right margin),
 150     bottom: (bottom margin),
 151     left: (left margin)
 152 }</code></pre>
 153
 154
 155 <p>This property may also be specified as a string containing
 156 space-separated, numeric margin values. The order of the sides associated
 157 with each value matches the way CSS processes margin values:</p>
 158
 159
 160 <div class="mdetail-params"><ul>
 161 <li>If there is only one value, it applies to all sides.</li>
 162 <li>If there are two values, the top and bottom borders are set to the
 163 first value and the right and left are set to the second.</li>
 164 <li>If there are three values, the top is set to the first value, the left
 165 and right are set to the second, and the bottom is set to the third.</li>
 166 <li>If there are four values, they apply to the top, right, bottom, and
 167 left, respectively.</li>
 168 </ul></div>
 169
 170
 171 <p>Defaults to:</p>
 172
 173
 174 <pre><code>{top:0, right:0, bottom:0, left:0}
 175 </code></pre>
 176
 177 </div></div></div><div id="config-fill" class="member ni"><a href="Ext.layout.container.Accordion.html#config-fill" rel="config-fill" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Accordion.html" class="definedIn docClass">Ext.layout.container.Accordion</a><br/><a href="../source/Accordion.html#Ext-layout.container.Accordion-cfg-fill" class="viewSource">view source</a></div><a name="fill"></a><a name="config-fill"></a><a href="Ext.layout.container.Accordion.html#" rel="config-fill" class="cls expand">fill</a><span> : Boolean</span></div><div class="description"><div class="short">True to adjust the active item's height to fill the available space in the container, false to use the
 178 item's current...</div><div class="long"><p>True to adjust the active item's height to fill the available space in the container, false to use the
 179 item's current height, or auto height if not explicitly set (defaults to true).</p>
 180 </div></div></div><div id="config-flex" class="member inherited"><a href="Ext.layout.container.Accordion.html#config-flex" rel="config-flex" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Box.html" class="definedIn docClass">Ext.layout.container.Box</a><br/><a href="../source/Box.html#Ext-layout.container.Box-cfg-flex" class="viewSource">view source</a></div><a name="flex"></a><a name="config-flex"></a><a href="Ext.layout.container.Accordion.html#" rel="config-flex" class="cls expand">flex</a><span> : Number</span></div><div class="description"><div class="short">This configuration option is to be applied to child items of the container managed
 181 by this layout. Each child item wi...</div><div class="long"><p>This configuration option is to be applied to <b>child <tt>items</tt></b> of the container managed
 182 by this layout. Each child item with a <tt>flex</tt> property will be flexed <b>horizontally</b>
 183 according to each item's <b>relative</b> <tt>flex</tt> value compared to the sum of all items with
 184 a <tt>flex</tt> value specified.  Any child items that have either a <tt>flex = 0</tt> or
 185 <tt>flex = undefined</tt> will not be 'flexed' (the initial size will not be changed).</p>
 186 </div></div></div><div id="config-hideCollapseTool" class="member ni"><a href="Ext.layout.container.Accordion.html#config-hideCollapseTool" rel="config-hideCollapseTool" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Accordion.html" class="definedIn docClass">Ext.layout.container.Accordion</a><br/><a href="../source/Accordion.html#Ext-layout.container.Accordion-cfg-hideCollapseTool" class="viewSource">view source</a></div><a name="hideCollapseTool"></a><a name="config-hideCollapseTool"></a><a href="Ext.layout.container.Accordion.html#" rel="config-hideCollapseTool" class="cls expand">hideCollapseTool</a><span> : Boolean</span></div><div class="description"><div class="short">True to hide the contained Panels' collapse/expand toggle buttons, false to display them (defaults to false).
 187 When se...</div><div class="long"><p>True to hide the contained Panels' collapse/expand toggle buttons, false to display them (defaults to false).
 188 When set to true, <a href="Ext.layout.container.Accordion.html#titleCollapse" rel="Ext.layout.container.Accordion#titleCollapse" class="docClass">titleCollapse</a> is automatically set to <code>true</code>.</p>
 189 </div></div></div><div id="config-itemCls" class="member inherited"><a href="Ext.layout.container.Accordion.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.Accordion.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
 190 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
 191 customized styles to the container or any of its children using standard CSS rules. See
 192 <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>
 193
 194
 195 <p></p></p>
 196 </div></div></div><div id="config-multi" class="member ni"><a href="Ext.layout.container.Accordion.html#config-multi" rel="config-multi" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Accordion.html" class="definedIn docClass">Ext.layout.container.Accordion</a><br/><a href="../source/Accordion.html#Ext-layout.container.Accordion-cfg-multi" class="viewSource">view source</a></div><a name="multi"></a><a name="config-multi"></a><a href="Ext.layout.container.Accordion.html#" rel="config-multi" class="cls expand">multi</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Defaults to <code>false</code>. Set to <code>true</code> to enable multiple accordion items to be open at once.</p>
 197 </div><div class="long"><p>Defaults to <code>false</code>. Set to <code>true</code> to enable multiple accordion items to be open at once.</p>
 198 </div></div></div><div id="config-pack" class="member inherited"><a href="Ext.layout.container.Accordion.html#config-pack" rel="config-pack" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Box.html" class="definedIn docClass">Ext.layout.container.Box</a><br/><a href="../source/Box.html#Ext-layout.container.Box-cfg-pack" class="viewSource">view source</a></div><a name="pack"></a><a name="config-pack"></a><a href="Ext.layout.container.Accordion.html#" rel="config-pack" class="cls expand">pack</a><span> : String</span></div><div class="description"><div class="short">Controls how the child items of the container are packed together. Acceptable configuration values
 199 for this property ...</div><div class="long"><p>Controls how the child items of the container are packed together. Acceptable configuration values
 200 for this property are:</p>
 201
 202 <div class="mdetail-params"><ul>
 203 <li><b><tt>start</tt></b> : <b>Default</b><div class="sub-desc">child items are packed together at
 204 <b>left</b> side of container</div></li>
 205 <li><b><tt>center</tt></b> : <div class="sub-desc">child items are packed together at
 206 <b>mid-width</b> of container</div></li>
 207 <li><b><tt>end</tt></b> : <div class="sub-desc">child items are packed together at <b>right</b>
 208 side of container</div></li>
 209 </ul></div>
 210
 211 </div></div></div><div id="config-padding" class="member inherited"><a href="Ext.layout.container.Accordion.html#config-padding" rel="config-padding" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Box.html" class="definedIn docClass">Ext.layout.container.Box</a><br/><a href="../source/Box.html#Ext-layout.container.Box-cfg-padding" class="viewSource">view source</a></div><a name="padding"></a><a name="config-padding"></a><a href="Ext.layout.container.Accordion.html#" rel="config-padding" class="cls expand">padding</a><span> : String</span></div><div class="description"><div class="short">Sets the padding to be applied to all child items managed by this layout.
 212
 213
 214 This property must be specified as a stri...</div><div class="long"><p>Sets the padding to be applied to all child items managed by this layout.</p>
 215
 216
 217 <p>This property must be specified as a string containing
 218 space-separated, numeric padding values. The order of the sides associated
 219 with each value matches the way CSS processes padding values:</p>
 220
 221
 222 <div class="mdetail-params"><ul>
 223 <li>If there is only one value, it applies to all sides.</li>
 224 <li>If there are two values, the top and bottom borders are set to the
 225 first value and the right and left are set to the second.</li>
 226 <li>If there are three values, the top is set to the first value, the left
 227 and right are set to the second, and the bottom is set to the third.</li>
 228 <li>If there are four values, they apply to the top, right, bottom, and
 229 left, respectively.</li>
 230 </ul></div>
 231
 232
 233 <p>Defaults to: <code>"0"</code></p>
 234
 235 </div></div></div><div id="config-titleCollapse" class="member ni"><a href="Ext.layout.container.Accordion.html#config-titleCollapse" rel="config-titleCollapse" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Accordion.html" class="definedIn docClass">Ext.layout.container.Accordion</a><br/><a href="../source/Accordion.html#Ext-layout.container.Accordion-cfg-titleCollapse" class="viewSource">view source</a></div><a name="titleCollapse"></a><a name="config-titleCollapse"></a><a href="Ext.layout.container.Accordion.html#" rel="config-titleCollapse" class="cls expand">titleCollapse</a><span> : Boolean</span></div><div class="description"><div class="short">Not implemented in PR2.
 236
 237
 238 True to allow expand/collapse of each contained panel by clicking anywhere on the title bar...</div><div class="long"><p><b>Not implemented in PR2.</b></p>
 239
 240
 241 <p>True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
 242 expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
 243 <a href="Ext.layout.container.Accordion.html#hideCollapseTool" rel="Ext.layout.container.Accordion#hideCollapseTool" class="docClass">hideCollapseTool</a> should be false also.</p>
 244 </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-getLayoutItems" class="member f inherited"><a href="Ext.layout.container.Accordion.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.Accordion.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
 245 ...</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
 246 base class), or the layout phase (onLayout).</p>
 247
 248 <h3 class="pa">Returns</h3><ul><li><span class="pre">Array</span>&nbsp; &nbsp;<p>of child components</p>
 249 </li></ul></div></div></div><div id="method-getRenderTarget" class="member inherited"><a href="Ext.layout.container.Accordion.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.Accordion.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>
 250
 251
 252 <p>May be overridden in layout managers which implement an inner element.</p>
 253 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 254 </li></ul></div></div></div><div id="method-getTarget" class="member inherited"><a href="Ext.layout.container.Accordion.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.Accordion.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>
 255 </div><div class="long"><p>Returns the owner component's resize element.</p>
 256 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;
 257 </li></ul></div></div></div><div id="method-updateChildBoxes" class="member inherited"><a href="Ext.layout.container.Accordion.html#method-updateChildBoxes" rel="method-updateChildBoxes" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.layout.container.Box.html" class="definedIn docClass">Ext.layout.container.Box</a><br/><a href="../source/Box.html#Ext-layout.container.Box-method-updateChildBoxes" class="viewSource">view source</a></div><a name="updateChildBoxes"></a><a name="method-updateChildBoxes"></a><a href="Ext.layout.container.Accordion.html#" rel="method-updateChildBoxes" class="cls expand">updateChildBoxes</a>(
 258 <span class="pre">Array boxes</span>)
 259  : void</div><div class="description"><div class="short"><p>Resizes and repositions each child component</p>
 260 </div><div class="long"><p>Resizes and repositions each child component</p>
 261 <h3 class="pa">Parameters</h3><ul><li><span class="pre">boxes</span> : Array<div class="sub-desc"><p>The box measurements</p>
 262 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 263 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>