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