<html>\r
<head>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \r
<title>The source code</title>\r
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
<pre class="prettyprint lang-js"><div id="cls-Ext.layout.AccordionLayout"></div>/**\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
*/\r
activeOnTop : false,\r
\r
+ type: 'accordion',\r
+\r
renderItem : function(c){\r
if(this.animate === false){\r
c.animCollapse = false;\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
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
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
+ // 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
- 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
- } \r
- });\r
+ }\r
+ };\r
+ // Subtract the header heights from the container size\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
* @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
- 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
+ if(ai){\r
+ ai.fireEvent('deactivate', ai);\r
+ }\r
this.activeItem = item;\r
+ item.fireEvent('activate', item);\r
}\r
}\r
-\r
}\r
});\r
Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;\r