| 27 |
jpm |
1 |
/*
|
|
|
2 |
* Ext JS Library 2.0.2
|
|
|
3 |
* Copyright(c) 2006-2008, Ext JS, LLC.
|
|
|
4 |
* licensing@extjs.com
|
|
|
5 |
*
|
|
|
6 |
* http://extjs.com/license
|
|
|
7 |
*/
|
|
|
8 |
|
|
|
9 |
/**
|
|
|
10 |
* @class Ext.layout.Accordion
|
|
|
11 |
* @extends Ext.layout.FitLayout
|
|
|
12 |
* <p>This is a layout that contains multiple panels in an expandable accordion style such that only one
|
|
|
13 |
* panel can be open at any given time. Each panel has built-in support for expanding and collapsing.
|
|
|
14 |
* This class is intended to be extended or created via the layout:'accordion' {@link Ext.Container#layout}
|
|
|
15 |
* config, and should generally not need to be created directly via the new keyword.</p>
|
|
|
16 |
* <p>Note that when creating a layout via config, the layout-specific config properties must be passed in via
|
|
|
17 |
* the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.
|
|
|
18 |
* Example usage:</p>
|
|
|
19 |
* <pre><code>
|
|
|
20 |
var accordion = new Ext.Panel({
|
|
|
21 |
title: 'Accordion Layout',
|
|
|
22 |
layout:'accordion',
|
|
|
23 |
defaults: {
|
|
|
24 |
// applied to each contained panel
|
|
|
25 |
bodyStyle: 'padding:15px'
|
|
|
26 |
},
|
|
|
27 |
layoutConfig: {
|
|
|
28 |
// layout-specific configs go here
|
|
|
29 |
titleCollapse: false,
|
|
|
30 |
animate: true,
|
|
|
31 |
activeOnTop: true
|
|
|
32 |
},
|
|
|
33 |
items: [{
|
|
|
34 |
title: 'Panel 1',
|
|
|
35 |
html: '<p>Panel content!</p>'
|
|
|
36 |
},{
|
|
|
37 |
title: 'Panel 2',
|
|
|
38 |
html: '<p>Panel content!</p>'
|
|
|
39 |
},{
|
|
|
40 |
title: 'Panel 3',
|
|
|
41 |
html: '<p>Panel content!</p>'
|
|
|
42 |
}]
|
|
|
43 |
});
|
|
|
44 |
</code></pre>
|
|
|
45 |
*/
|
|
|
46 |
Ext.layout.Accordion = Ext.extend(Ext.layout.FitLayout, {
|
|
|
47 |
/**
|
|
|
48 |
* @cfg {Boolean} fill
|
|
|
49 |
* True to adjust the active item's height to fill the available space in the container, false to use the
|
|
|
50 |
* item's current height, or auto height if not explicitly set (defaults to true).
|
|
|
51 |
*/
|
|
|
52 |
fill : true,
|
|
|
53 |
/**
|
|
|
54 |
* @cfg {Boolean} autoWidth
|
|
|
55 |
* True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
|
|
|
56 |
*/
|
|
|
57 |
autoWidth : true,
|
|
|
58 |
/**
|
|
|
59 |
* @cfg {Boolean} titleCollapse
|
|
|
60 |
* True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
|
|
|
61 |
* expand/collapse only when the toggle tool button is clicked (defaults to true). When set to false,
|
|
|
62 |
* {@link #hideCollapseTool} should be false also.
|
|
|
63 |
*/
|
|
|
64 |
titleCollapse : true,
|
|
|
65 |
/**
|
|
|
66 |
* @cfg {Boolean} hideCollapseTool
|
|
|
67 |
* True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
|
|
|
68 |
* When set to true, {@link #titleCollapse} should be true also.
|
|
|
69 |
*/
|
|
|
70 |
hideCollapseTool : false,
|
|
|
71 |
/**
|
|
|
72 |
* @cfg {Boolean} collapseFirst
|
|
|
73 |
* True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
|
|
|
74 |
* in the contained panels' title bars, false to render it last (defaults to false).
|
|
|
75 |
*/
|
|
|
76 |
collapseFirst : false,
|
|
|
77 |
/**
|
|
|
78 |
* @cfg {Boolean} animate
|
|
|
79 |
* True to slide the contained panels open and closed during expand/collapse using animation, false to open and
|
|
|
80 |
* close directly with no animation (defaults to false). Note: to defer to the specific config setting of each
|
|
|
81 |
* contained panel for this property, set this to undefined at the layout level.
|
|
|
82 |
*/
|
|
|
83 |
animate : false,
|
|
|
84 |
/**
|
|
|
85 |
* @cfg {Boolean} sequence
|
|
|
86 |
* <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.
|
|
|
87 |
*/
|
|
|
88 |
sequence : false,
|
|
|
89 |
/**
|
|
|
90 |
* @cfg {Boolean} activeOnTop
|
|
|
91 |
* True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
|
|
|
92 |
* false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
|
|
|
93 |
*/
|
|
|
94 |
activeOnTop : false,
|
|
|
95 |
|
|
|
96 |
renderItem : function(c){
|
|
|
97 |
if(this.animate === false){
|
|
|
98 |
c.animCollapse = false;
|
|
|
99 |
}
|
|
|
100 |
c.collapsible = true;
|
|
|
101 |
if(this.autoWidth){
|
|
|
102 |
c.autoWidth = true;
|
|
|
103 |
}
|
|
|
104 |
if(this.titleCollapse){
|
|
|
105 |
c.titleCollapse = true;
|
|
|
106 |
}
|
|
|
107 |
if(this.hideCollapseTool){
|
|
|
108 |
c.hideCollapseTool = true;
|
|
|
109 |
}
|
|
|
110 |
if(this.collapseFirst !== undefined){
|
|
|
111 |
c.collapseFirst = this.collapseFirst;
|
|
|
112 |
}
|
|
|
113 |
if(!this.activeItem && !c.collapsed){
|
|
|
114 |
this.activeItem = c;
|
|
|
115 |
}else if(this.activeItem){
|
|
|
116 |
c.collapsed = true;
|
|
|
117 |
}
|
|
|
118 |
Ext.layout.Accordion.superclass.renderItem.apply(this, arguments);
|
|
|
119 |
c.header.addClass('x-accordion-hd');
|
|
|
120 |
c.on('beforeexpand', this.beforeExpand, this);
|
|
|
121 |
},
|
|
|
122 |
|
|
|
123 |
// private
|
|
|
124 |
beforeExpand : function(p, anim){
|
|
|
125 |
var ai = this.activeItem;
|
|
|
126 |
if(ai){
|
|
|
127 |
if(this.sequence){
|
|
|
128 |
delete this.activeItem;
|
|
|
129 |
ai.collapse({callback:function(){
|
|
|
130 |
p.expand(anim || true);
|
|
|
131 |
}, scope: this});
|
|
|
132 |
return false;
|
|
|
133 |
}else{
|
|
|
134 |
ai.collapse(this.animate);
|
|
|
135 |
}
|
|
|
136 |
}
|
|
|
137 |
this.activeItem = p;
|
|
|
138 |
if(this.activeOnTop){
|
|
|
139 |
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
|
|
|
140 |
}
|
|
|
141 |
this.layout();
|
|
|
142 |
},
|
|
|
143 |
|
|
|
144 |
// private
|
|
|
145 |
setItemSize : function(item, size){
|
|
|
146 |
if(this.fill && item){
|
|
|
147 |
var items = this.container.items.items;
|
|
|
148 |
var hh = 0;
|
|
|
149 |
for(var i = 0, len = items.length; i < len; i++){
|
|
|
150 |
var p = items[i];
|
|
|
151 |
if(p != item){
|
|
|
152 |
hh += (p.getSize().height - p.bwrap.getHeight());
|
|
|
153 |
}
|
|
|
154 |
}
|
|
|
155 |
size.height -= hh;
|
|
|
156 |
item.setSize(size);
|
|
|
157 |
}
|
|
|
158 |
}
|
|
|
159 |
});
|
|
|
160 |
Ext.Container.LAYOUTS['accordion'] = Ext.layout.Accordion;
|