Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / src / widgets / layout / AccordionLayout.js
index ac45b90..c552285 100644 (file)
@@ -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 @@
 /**\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
@@ -109,7 +110,7 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
             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
@@ -117,6 +118,14 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
         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
@@ -134,7 +143,7 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
                 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
@@ -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\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