-<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a> <img src="resources/elbow-end.gif"><a href="output/Ext.layout.FitLayout.html" ext:member="" ext:cls="Ext.layout.FitLayout">FitLayout</a> <img src="resources/elbow-end.gif">AccordionLayout</pre></div><h1>Class <a href="source/AccordionLayout.html#cls-Ext.layout.AccordionLayout">Ext.layout.AccordionLayout</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">AccordionLayout.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/AccordionLayout.html#cls-Ext.layout.AccordionLayout">AccordionLayout</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 is a layout that manages multiple Panels in an expandable accordion style such that only\r
-<b>one Panel can be expanded at any given time</b>. Each Panel has built-in support for expanding and collapsing.</p>\r
-<p>Note: Only Ext.Panels <b>and all subclasses of Ext.Panel</b> may be used in an accordion layout Container.</p>\r
-<p>This class is intended to be extended or created via the <tt><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></tt>\r
-configuration property. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">Ext.Container.layout</a></b></tt> for additional details.</p>\r
-<p>Example usage:</p>\r
-<pre><code><b>var</b> accordion = <b>new</b> Ext.Panel({\r
- title: <em>'Accordion Layout'</em>,\r
- layout:<em>'accordion'</em>,\r
- defaults: {\r
- <i>// applied to each contained panel\r</i>
- bodyStyle: <em>'padding:15px'</em>\r
- },\r
- layoutConfig: {\r
- <i>// layout-specific configs go here\r</i>
- titleCollapse: false,\r
- animate: true,\r
- activeOnTop: true\r
- },\r
- items: [{\r
- title: <em>'Panel 1'</em>,\r
- html: <em>'<p>Panel content!</p>'</em>\r
- },{\r
- title: <em>'Panel 2'</em>,\r
- html: <em>'<p>Panel content!</p>'</em>\r
- },{\r
- title: <em>'Panel 3'</em>,\r
- html: <em>'<p>Panel content!</p>'</em>\r
- }]\r
-});</code></pre></div><div class="hr"></div><a id="Ext.layout.AccordionLayout-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.AccordionLayout-activeOnTop"></a><b><a href="source/AccordionLayout.html#cfg-Ext.layout.AccordionLayout-activeOnTop">activeOnTop</a></b> : Boolean<div class="mdesc"><div class="short">True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
-false ...</div><div class="long">True to swap the position of each panel as it is expanded so that it becomes the first item in the container,\r
-false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).</div></div></td><td class="msource">AccordionLayout</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.AccordionLayout-animate"></a><b><a href="source/AccordionLayout.html#cfg-Ext.layout.AccordionLayout-animate">animate</a></b> : Boolean<div class="mdesc"><div class="short">True to slide the contained panels open and closed during expand/collapse using animation, false to open and
-close d...</div><div class="long">True to slide the contained panels open and closed during expand/collapse using animation, false to open and\r
-close directly with no animation (defaults to false). Note: to defer to the specific config setting of each\r
-contained panel for this property, set this to undefined at the layout level.</div></div></td><td class="msource">AccordionLayout</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.AccordionLayout-autoWidth"></a><b><a href="source/AccordionLayout.html#cfg-Ext.layout.AccordionLayout-autoWidth">autoWidth</a></b> : Boolean<div class="mdesc"><div class="short">True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
-Note th...</div><div class="long">True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).\r
-Note that some components, in particular the <a href="output/Ext.grid.GridPanel.html" ext:cls="Ext.grid.GridPanel">grid</a>, will not function properly within\r
-layouts if they have auto width, so in such cases this config should be set to false.</div></div></td><td class="msource">AccordionLayout</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.AccordionLayout-collapseFirst"></a><b><a href="source/AccordionLayout.html#cfg-Ext.layout.AccordionLayout-collapseFirst">collapseFirst</a></b> : Boolean<div class="mdesc"><div class="short">True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
-in the con...</div><div class="long">True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.layout.AccordionLayout-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.layout.AccordionLayout-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.layout.AccordionLayout-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.layout.AccordionLayout-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.layout.AccordionLayout"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a> <img src="resources/elbow-end.gif"><a href="output/Ext.layout.FitLayout.html" ext:member="" ext:cls="Ext.layout.FitLayout">FitLayout</a> <img src="resources/elbow-end.gif">AccordionLayout</pre></div><h1>Class <a href="source/AccordionLayout.html#cls-Ext.layout.AccordionLayout">Ext.layout.AccordionLayout</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/AccordionLayout.html#cls-Ext.layout.AccordionLayout">AccordionLayout.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/AccordionLayout.html#cls-Ext.layout.AccordionLayout">AccordionLayout</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 is a layout that manages multiple Panels in an expandable accordion style such that only
+<b>one Panel can be expanded at any given time</b>. Each Panel has built-in support for expanding and collapsing.</p>
+<p>Note: Only Ext.Panels <b>and all subclasses of Ext.Panel</b> may be used in an accordion layout Container.</p>
+<p>This class is intended to be extended or created via the <tt><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">layout</a></b></tt>
+configuration property. See <tt><b><a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">Ext.Container.layout</a></b></tt> for additional details.</p>
+<p>Example usage:</p>
+<pre><code><b>var</b> accordion = <b>new</b> Ext.Panel({
+ title: <em>'Accordion Layout'</em>,
+ layout:<em>'accordion'</em>,
+ defaults: {
+ <i>// applied to each contained panel</i>
+ bodyStyle: <em>'padding:15px'</em>
+ },
+ layoutConfig: {
+ <i>// layout-specific configs go here</i>
+ titleCollapse: false,
+ animate: true,
+ activeOnTop: true
+ },
+ items: [{
+ title: <em>'Panel 1'</em>,
+ html: <em>'<p>Panel content!</p>'</em>
+ },{
+ title: <em>'Panel 2'</em>,
+ html: <em>'<p>Panel content!</p>'</em>
+ },{
+ title: <em>'Panel 3'</em>,
+ html: <em>'<p>Panel content!</p>'</em>
+ }]
+});</code></pre></div><div class="hr"></div><a id="Ext.layout.AccordionLayout-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.AccordionLayout-activeOnTop"></a><b><a href="source/AccordionLayout.html#cfg-Ext.layout.AccordionLayout-activeOnTop">activeOnTop</a></b> : Boolean<div class="mdesc"><div class="short">True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
+false t...</div><div class="long">True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
+false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).</div></div></td><td class="msource">AccordionLayout</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.AccordionLayout-animate"></a><b><a href="source/AccordionLayout.html#cfg-Ext.layout.AccordionLayout-animate">animate</a></b> : Boolean<div class="mdesc"><div class="short">True to slide the contained panels open and closed during expand/collapse using animation, false to open and
+close di...</div><div class="long">True to slide the contained panels open and closed during expand/collapse using animation, false to open and
+close directly with no animation (defaults to false). Note: to defer to the specific config setting of each
+contained panel for this property, set this to undefined at the layout level.</div></div></td><td class="msource">AccordionLayout</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.AccordionLayout-autoWidth"></a><b><a href="source/AccordionLayout.html#cfg-Ext.layout.AccordionLayout-autoWidth">autoWidth</a></b> : Boolean<div class="mdesc"><div class="short">True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
+Note tha...</div><div class="long">True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
+Note that some components, in particular the <a href="output/Ext.grid.GridPanel.html" ext:cls="Ext.grid.GridPanel">grid</a>, will not function properly within
+layouts if they have auto width, so in such cases this config should be set to false.</div></div></td><td class="msource">AccordionLayout</td></tr><tr class="config-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.layout.AccordionLayout-collapseFirst"></a><b><a href="source/AccordionLayout.html#cfg-Ext.layout.AccordionLayout-collapseFirst">collapseFirst</a></b> : Boolean<div class="mdesc"><div class="short">True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
+in the cont...</div><div class="long">True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
git.ithinksw.org / extjs.git / blobdiff