Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / AccordionLayout.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 <div id="cls-Ext.layout.AccordionLayout"></div>/**
16  * @class Ext.layout.AccordionLayout
17  * @extends Ext.layout.FitLayout
18  * <p>This is a layout that manages multiple Panels in an expandable accordion style such that only
19  * <b>one Panel can be expanded at any given time</b>. Each Panel has built-in support for expanding and collapsing.</p>
20  * <p>Note: Only Ext.Panels <b>and all subclasses of Ext.Panel</b> may be used in an accordion layout Container.</p>
21  * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
22  * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
23  * <p>Example usage:</p>
24  * <pre><code>
25 var accordion = new Ext.Panel({
26     title: 'Accordion Layout',
27     layout:'accordion',
28     defaults: {
29         // applied to each contained panel
30         bodyStyle: 'padding:15px'
31     },
32     layoutConfig: {
33         // layout-specific configs go here
34         titleCollapse: false,
35         animate: true,
36         activeOnTop: true
37     },
38     items: [{
39         title: 'Panel 1',
40         html: '&lt;p&gt;Panel content!&lt;/p&gt;'
41     },{
42         title: 'Panel 2',
43         html: '&lt;p&gt;Panel content!&lt;/p&gt;'
44     },{
45         title: 'Panel 3',
46         html: '&lt;p&gt;Panel content!&lt;/p&gt;'
47     }]
48 });
49 </code></pre>
50  */
51 Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
52     <div id="cfg-Ext.layout.AccordionLayout-fill"></div>/**
53      * @cfg {Boolean} fill
54      * True to adjust the active item's height to fill the available space in the container, false to use the
55      * item's current height, or auto height if not explicitly set (defaults to true).
56      */
57     fill : true,
58     <div id="cfg-Ext.layout.AccordionLayout-autoWidth"></div>/**
59      * @cfg {Boolean} autoWidth
60      * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
61      * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
62      * layouts if they have auto width, so in such cases this config should be set to false.
63      */
64     autoWidth : true,
65     <div id="cfg-Ext.layout.AccordionLayout-titleCollapse"></div>/**
66      * @cfg {Boolean} titleCollapse
67      * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
68      * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
69      * {@link #hideCollapseTool} should be false also.
70      */
71     titleCollapse : true,
72     <div id="cfg-Ext.layout.AccordionLayout-hideCollapseTool"></div>/**
73      * @cfg {Boolean} hideCollapseTool
74      * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
75      * When set to true, {@link #titleCollapse} should be true also.
76      */
77     hideCollapseTool : false,
78     <div id="cfg-Ext.layout.AccordionLayout-collapseFirst"></div>/**
79      * @cfg {Boolean} collapseFirst
80      * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
81      * in the contained panels' title bars, false to render it last (defaults to false).
82      */
83     collapseFirst : false,
84     <div id="cfg-Ext.layout.AccordionLayout-animate"></div>/**
85      * @cfg {Boolean} animate
86      * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
87      * close directly with no animation (defaults to false).  Note: to defer to the specific config setting of each
88      * contained panel for this property, set this to undefined at the layout level.
89      */
90     animate : false,
91     <div id="cfg-Ext.layout.AccordionLayout-sequence"></div>/**
92      * @cfg {Boolean} sequence
93      * <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.
94      */
95     sequence : false,
96     <div id="cfg-Ext.layout.AccordionLayout-activeOnTop"></div>/**
97      * @cfg {Boolean} activeOnTop
98      * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
99      * false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
100      */
101     activeOnTop : false,
102
103     type: 'accordion',
104
105     renderItem : function(c){
106         if(this.animate === false){
107             c.animCollapse = false;
108         }
109         c.collapsible = true;
110         if(this.autoWidth){
111             c.autoWidth = true;
112         }
113         if(this.titleCollapse){
114             c.titleCollapse = true;
115         }
116         if(this.hideCollapseTool){
117             c.hideCollapseTool = true;
118         }
119         if(this.collapseFirst !== undefined){
120             c.collapseFirst = this.collapseFirst;
121         }
122         if(!this.activeItem && !c.collapsed){
123             this.setActiveItem(c, true);
124         }else if(this.activeItem && this.activeItem != c){
125             c.collapsed = true;
126         }
127         Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
128         c.header.addClass('x-accordion-hd');
129         c.on('beforeexpand', this.beforeExpand, this);
130     },
131
132     onRemove: function(c){
133         Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
134         if(c.rendered){
135             c.header.removeClass('x-accordion-hd');
136         }
137         c.un('beforeexpand', this.beforeExpand, this);
138     },
139
140     // private
141     beforeExpand : function(p, anim){
142         var ai = this.activeItem;
143         if(ai){
144             if(this.sequence){
145                 delete this.activeItem;
146                 if (!ai.collapsed){
147                     ai.collapse({callback:function(){
148                         p.expand(anim || true);
149                     }, scope: this});
150                     return false;
151                 }
152             }else{
153                 ai.collapse(this.animate);
154             }
155         }
156         this.setActive(p);
157         if(this.activeOnTop){
158             p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
159         }
160         // Items have been hidden an possibly rearranged, we need to get the container size again.
161         this.layout();
162     },
163
164     // private
165     setItemSize : function(item, size){
166         if(this.fill && item){
167             var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p;
168             // Add up all the header heights
169             for (i = 0; i < len; i++) {
170                 if((p = ct[i]) != item && !p.hidden){
171                     hh += p.header.getHeight();
172                 }
173             };
174             // Subtract the header heights from the container size
175             size.height -= hh;
176             // Call setSize on the container to set the correct height.  For Panels, deferedHeight
177             // will simply store this size for when the expansion is done.
178             item.setSize(size);
179         }
180     },
181
182     <div id="method-Ext.layout.AccordionLayout-setActiveItem"></div>/**
183      * Sets the active (expanded) item in the layout.
184      * @param {String/Number} item The string component id or numeric index of the item to activate
185      */
186     setActiveItem : function(item){
187         this.setActive(item, true);
188     },
189
190     // private
191     setActive : function(item, expand){
192         var ai = this.activeItem;
193         item = this.container.getComponent(item);
194         if(ai != item){
195             if(item.rendered && item.collapsed && expand){
196                 item.expand();
197             }else{
198                 if(ai){
199                    ai.fireEvent('deactivate', ai);
200                 }
201                 this.activeItem = item;
202                 item.fireEvent('activate', item);
203             }
204         }
205     }
206 });
207 Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
208
209 //backwards compat
210 Ext.layout.Accordion = Ext.layout.AccordionLayout;</pre>    
211 </body>
212 </html>