X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..6e39d509471fe9b4e2660e0d1631b350d0c66f40:/docs/source/AccordionLayout.html diff --git a/docs/source/AccordionLayout.html b/docs/source/AccordionLayout.html index 5c147da2..fe5486ef 100644 --- a/docs/source/AccordionLayout.html +++ b/docs/source/AccordionLayout.html @@ -1,5 +1,6 @@ + The source code @@ -8,8 +9,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:

@@ -110,7 +112,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;
         }
@@ -118,6 +120,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){
@@ -135,7 +145,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);
         }
@@ -161,15 +171,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;