Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / AccordionLayout.html
index 6cc5292..4f1242c 100644 (file)
@@ -1,17 +1,12 @@
-<html>
-<head>
-  <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
-</head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.layout.AccordionLayout"></div>/**\r
+<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
+</head>\r
+<body  onload="prettyPrint();">\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 manages multiple Panels in an expandable accordion style such that only\r
@@ -99,6 +94,8 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
      */\r
     activeOnTop : false,\r
 \r
+    type: 'accordion',\r
+\r
     renderItem : function(c){\r
         if(this.animate === false){\r
             c.animCollapse = false;\r
@@ -117,7 +114,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
@@ -125,7 +122,7 @@ Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
         c.header.addClass('x-accordion-hd');\r
         c.on('beforeexpand', this.beforeExpand, this);\r
     },\r
-    \r
+\r
     onRemove: function(c){\r
         Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);\r
         if(c.rendered){\r
@@ -150,23 +147,28 @@ 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
+        // 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
@@ -176,20 +178,29 @@ 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
 \r
 //backwards compat\r
-Ext.layout.Accordion = Ext.layout.AccordionLayout;</pre>
-</body>
+Ext.layout.Accordion = Ext.layout.AccordionLayout;</pre>    \r
+</body>\r
 </html>
\ No newline at end of file