X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..6e39d509471fe9b4e2660e0d1631b350d0c66f40:/src/widgets/layout/AccordionLayout.js diff --git a/src/widgets/layout/AccordionLayout.js b/src/widgets/layout/AccordionLayout.js index ac45b909..c552285a 100644 --- a/src/widgets/layout/AccordionLayout.js +++ b/src/widgets/layout/AccordionLayout.js @@ -1,5 +1,5 @@ /*! - * Ext JS Library 3.0.0 + * Ext JS Library 3.1.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license @@ -7,8 +7,9 @@ /** * @class Ext.layout.AccordionLayout * @extends Ext.layout.FitLayout - *

This is a layout that contains multiple panels in an expandable accordion style such that only - * one panel can be open at any given time. Each panel has built-in support for expanding and collapsing. + *

This is a layout that manages multiple Panels in an expandable accordion style such that only + * one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.

+ *

Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.

*

This class is intended to be extended or created via the {@link Ext.Container#layout layout} * configuration property. See {@link Ext.Container#layout} for additional details.

*

Example usage:

@@ -109,7 +110,7 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, { c.collapseFirst = this.collapseFirst; } if(!this.activeItem && !c.collapsed){ - this.activeItem = c; + this.setActiveItem(c, true); }else if(this.activeItem && this.activeItem != c){ c.collapsed = true; } @@ -117,6 +118,14 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, { c.header.addClass('x-accordion-hd'); c.on('beforeexpand', this.beforeExpand, this); }, + + onRemove: function(c){ + Ext.layout.AccordionLayout.superclass.onRemove.call(this, c); + if(c.rendered){ + c.header.removeClass('x-accordion-hd'); + } + c.un('beforeexpand', this.beforeExpand, this); + }, // private beforeExpand : function(p, anim){ @@ -134,7 +143,7 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, { ai.collapse(this.animate); } } - this.activeItem = p; + this.setActive(p); if(this.activeOnTop){ p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild); } @@ -160,15 +169,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 */ setActiveItem : function(item){ + this.setActive(item, true); + }, + + // private + setActive : function(item, expand){ + var ai = this.activeItem; item = this.container.getComponent(item); - if(this.activeItem != item){ - if(item.rendered && item.collapsed){ + if(ai != item){ + if(item.rendered && item.collapsed && expand){ item.expand(); }else{ + if(ai){ + ai.fireEvent('deactivate', ai); + } this.activeItem = item; + item.fireEvent('activate', item); } } - } }); Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;