<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
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.header.addClass('x-accordion-hd');\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
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
* @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