git.ithinksw.org
/
extjs.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git]
/
src
/
widgets
/
layout
/
AccordionLayout.js
diff --git
a/src/widgets/layout/AccordionLayout.js
b/src/widgets/layout/AccordionLayout.js
index
ac45b90
..
9998c93
100644
(file)
--- a/
src/widgets/layout/AccordionLayout.js
+++ b/
src/widgets/layout/AccordionLayout.js
@@
-1,14
+1,15
@@
/*!
/*!
- * Ext JS Library 3.
0.0
- * Copyright(c) 2006-20
09
Ext JS, LLC
+ * Ext JS Library 3.
1.1
+ * Copyright(c) 2006-20
10
Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
/**
\r
* @class Ext.layout.AccordionLayout
\r
* @extends Ext.layout.FitLayout
\r
* licensing@extjs.com
* http://www.extjs.com/license
*/
/**
\r
* @class Ext.layout.AccordionLayout
\r
* @extends Ext.layout.FitLayout
\r
- * <p>This is a layout that contains multiple panels in an expandable accordion style such that only
\r
- * <b>one panel can be open at any given time</b>. Each panel has built-in support for expanding and collapsing.
\r
+ * <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>{@link Ext.Container#layout layout}</b></tt>
\r
* configuration property. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
\r
* <p>Example usage:</p>
\r
* <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
\r
* configuration property. See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
\r
* <p>Example usage:</p>
\r
@@
-91,6
+92,8
@@
Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
*/
\r
activeOnTop : false,
\r
\r
*/
\r
activeOnTop : false,
\r
\r
+ type: 'accordion',
\r
+
\r
renderItem : function(c){
\r
if(this.animate === false){
\r
c.animCollapse = false;
\r
renderItem : function(c){
\r
if(this.animate === false){
\r
c.animCollapse = false;
\r
@@
-109,7
+112,7
@@
Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
c.collapseFirst = this.collapseFirst;
\r
}
\r
if(!this.activeItem && !c.collapsed){
\r
c.collapseFirst = this.collapseFirst;
\r
}
\r
if(!this.activeItem && !c.collapsed){
\r
- this.
activeItem = c
;
\r
+ this.
setActiveItem(c, true)
;
\r
}else if(this.activeItem && this.activeItem != c){
\r
c.collapsed = true;
\r
}
\r
}else if(this.activeItem && this.activeItem != c){
\r
c.collapsed = true;
\r
}
\r
@@
-118,6
+121,14
@@
Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
c.on('beforeexpand', this.beforeExpand, this);
\r
},
\r
\r
c.on('beforeexpand', this.beforeExpand, this);
\r
},
\r
\r
+ onRemove: function(c){
\r
+ Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
\r
+ if(c.rendered){
\r
+ c.header.removeClass('x-accordion-hd');
\r
+ }
\r
+ c.un('beforeexpand', this.beforeExpand, this);
\r
+ },
\r
+
\r
// private
\r
beforeExpand : function(p, anim){
\r
var ai = this.activeItem;
\r
// private
\r
beforeExpand : function(p, anim){
\r
var ai = this.activeItem;
\r
@@
-134,23
+145,28
@@
Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
ai.collapse(this.animate);
\r
}
\r
}
\r
ai.collapse(this.animate);
\r
}
\r
}
\r
- this.
activeItem = p
;
\r
+ this.
setActive(p)
;
\r
if(this.activeOnTop){
\r
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
\r
}
\r
if(this.activeOnTop){
\r
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
\r
}
\r
+ // Items have been hidden an possibly rearranged, we need to get the container size again.
\r
this.layout();
\r
},
\r
\r
// private
\r
setItemSize : function(item, size){
\r
if(this.fill && item){
\r
this.layout();
\r
},
\r
\r
// private
\r
setItemSize : function(item, size){
\r
if(this.fill && item){
\r
- var hh = 0;
\r
- this.container.items.each(function(p){
\r
- if(p != item){
\r
+ var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p;
\r
+ // Add up all the header heights
\r
+ for (i = 0; i < len; i++) {
\r
+ if((p = ct[i]) != item){
\r
hh += p.header.getHeight();
\r
hh += p.header.getHeight();
\r
- }
\r
- });
\r
+ }
\r
+ };
\r
+ // Subtract the header heights from the container size
\r
size.height -= hh;
\r
size.height -= hh;
\r
+ // Call setSize on the container to set the correct height. For Panels, deferedHeight
\r
+ // will simply store this size for when the expansion is done.
\r
item.setSize(size);
\r
}
\r
},
\r
item.setSize(size);
\r
}
\r
},
\r
@@
-160,15
+176,24
@@
Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
* @param {String/Number} item The string component id or numeric index of the item to activate
\r
*/
\r
setActiveItem : function(item){
\r
* @param {String/Number} item The string component id or numeric index of the item to activate
\r
*/
\r
setActiveItem : function(item){
\r
+ this.setActive(item, true);
\r
+ },
\r
+
\r
+ // private
\r
+ setActive : function(item, expand){
\r
+ var ai = this.activeItem;
\r
item = this.container.getComponent(item);
\r
item = this.container.getComponent(item);
\r
- if(
this.activeItem
!= item){
\r
- if(item.rendered && item.collapsed){
\r
+ if(
ai
!= item){
\r
+ if(item.rendered && item.collapsed
&& expand
){
\r
item.expand();
\r
}else{
\r
item.expand();
\r
}else{
\r
+ if(ai){
\r
+ ai.fireEvent('deactivate', ai);
\r
+ }
\r
this.activeItem = item;
\r
this.activeItem = item;
\r
+ item.fireEvent('activate', item);
\r
}
\r
}
\r
}
\r
}
\r
-
\r
}
\r
});
\r
Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
\r
}
\r
});
\r
Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
\r