src/widgets/layout/AccordionLayout.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.layout.AccordionLayout
   9  * @extends Ext.layout.FitLayout
  10  * <p>This is a layout that manages multiple Panels in an expandable accordion style such that only
  11  * <b>one Panel can be expanded at any given time</b>. Each Panel has built-in support for expanding and collapsing.</p>
  12  * <p>Note: Only Ext.Panels <b>and all subclasses of Ext.Panel</b> may be used in an accordion layout Container.</p>
  13  * <p>This class is intended to be extended or created via the <tt><b>{@link Ext.Container#layout layout}</b></tt>
  14  * configuration property.  See <tt><b>{@link Ext.Container#layout}</b></tt> for additional details.</p>
  15  * <p>Example usage:</p>
  16  * <pre><code>
  17 var accordion = new Ext.Panel({
  18     title: 'Accordion Layout',
  19     layout:'accordion',
  20     defaults: {
  21         // applied to each contained panel
  22         bodyStyle: 'padding:15px'
  23     },
  24     layoutConfig: {
  25         // layout-specific configs go here
  26         titleCollapse: false,
  27         animate: true,
  28         activeOnTop: true
  29     },
  30     items: [{
  31         title: 'Panel 1',
  32         html: '&lt;p&gt;Panel content!&lt;/p&gt;'
  33     },{
  34         title: 'Panel 2',
  35         html: '&lt;p&gt;Panel content!&lt;/p&gt;'
  36     },{
  37         title: 'Panel 3',
  38         html: '&lt;p&gt;Panel content!&lt;/p&gt;'
  39     }]
  40 });
  41 </code></pre>
  42  */
  43 Ext.layout.AccordionLayout = Ext.extend(Ext.layout.FitLayout, {
  44     /**
  45      * @cfg {Boolean} fill
  46      * True to adjust the active item's height to fill the available space in the container, false to use the
  47      * item's current height, or auto height if not explicitly set (defaults to true).
  48      */
  49     fill : true,
  50     /**
  51      * @cfg {Boolean} autoWidth
  52      * True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
  53      * Note that some components, in particular the {@link Ext.grid.GridPanel grid}, will not function properly within
  54      * layouts if they have auto width, so in such cases this config should be set to false.
  55      */
  56     autoWidth : true,
  57     /**
  58      * @cfg {Boolean} titleCollapse
  59      * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
  60      * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
  61      * {@link #hideCollapseTool} should be false also.
  62      */
  63     titleCollapse : true,
  64     /**
  65      * @cfg {Boolean} hideCollapseTool
  66      * True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
  67      * When set to true, {@link #titleCollapse} should be true also.
  68      */
  69     hideCollapseTool : false,
  70     /**
  71      * @cfg {Boolean} collapseFirst
  72      * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
  73      * in the contained panels' title bars, false to render it last (defaults to false).
  74      */
  75     collapseFirst : false,
  76     /**
  77      * @cfg {Boolean} animate
  78      * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
  79      * close directly with no animation (defaults to false).  Note: to defer to the specific config setting of each
  80      * contained panel for this property, set this to undefined at the layout level.
  81      */
  82     animate : false,
  83     /**
  84      * @cfg {Boolean} sequence
  85      * <b>Experimental</b>. If animate is set to true, this will result in each animation running in sequence.
  86      */
  87     sequence : false,
  88     /**
  89      * @cfg {Boolean} activeOnTop
  90      * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
  91      * false to keep the panels in the rendered order. <b>This is NOT compatible with "animate:true"</b> (defaults to false).
  92      */
  93     activeOnTop : false,
  94
  95     type: 'accordion',
  96
  97     renderItem : function(c){
  98         if(this.animate === false){
  99             c.animCollapse = false;
 100         }
 101         c.collapsible = true;
 102         if(this.autoWidth){
 103             c.autoWidth = true;
 104         }
 105         if(this.titleCollapse){
 106             c.titleCollapse = true;
 107         }
 108         if(this.hideCollapseTool){
 109             c.hideCollapseTool = true;
 110         }
 111         if(this.collapseFirst !== undefined){
 112             c.collapseFirst = this.collapseFirst;
 113         }
 114         if(!this.activeItem && !c.collapsed){
 115             this.setActiveItem(c, true);
 116         }else if(this.activeItem && this.activeItem != c){
 117             c.collapsed = true;
 118         }
 119         Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
 120         c.header.addClass('x-accordion-hd');
 121         c.on('beforeexpand', this.beforeExpand, this);
 122     },
 123
 124     onRemove: function(c){
 125         Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
 126         if(c.rendered){
 127             c.header.removeClass('x-accordion-hd');
 128         }
 129         c.un('beforeexpand', this.beforeExpand, this);
 130     },
 131
 132     // private
 133     beforeExpand : function(p, anim){
 134         var ai = this.activeItem;
 135         if(ai){
 136             if(this.sequence){
 137                 delete this.activeItem;
 138                 if (!ai.collapsed){
 139                     ai.collapse({callback:function(){
 140                         p.expand(anim || true);
 141                     }, scope: this});
 142                     return false;
 143                 }
 144             }else{
 145                 ai.collapse(this.animate);
 146             }
 147         }
 148         this.setActive(p);
 149         if(this.activeOnTop){
 150             p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
 151         }
 152         // Items have been hidden an possibly rearranged, we need to get the container size again.
 153         this.layout();
 154     },
 155
 156     // private
 157     setItemSize : function(item, size){
 158         if(this.fill && item){
 159             var hh = 0, i, ct = this.getRenderedItems(this.container), len = ct.length, p;
 160             // Add up all the header heights
 161             for (i = 0; i < len; i++) {
 162                 if((p = ct[i]) != item && !p.hidden){
 163                     hh += p.header.getHeight();
 164                 }
 165             };
 166             // Subtract the header heights from the container size
 167             size.height -= hh;
 168             // Call setSize on the container to set the correct height.  For Panels, deferedHeight
 169             // will simply store this size for when the expansion is done.
 170             item.setSize(size);
 171         }
 172     },
 173
 174     /**
 175      * Sets the active (expanded) item in the layout.
 176      * @param {String/Number} item The string component id or numeric index of the item to activate
 177      */
 178     setActiveItem : function(item){
 179         this.setActive(item, true);
 180     },
 181
 182     // private
 183     setActive : function(item, expand){
 184         var ai = this.activeItem;
 185         item = this.container.getComponent(item);
 186         if(ai != item){
 187             if(item.rendered && item.collapsed && expand){
 188                 item.expand();
 189             }else{
 190                 if(ai){
 191                    ai.fireEvent('deactivate', ai);
 192                 }
 193                 this.activeItem = item;
 194                 item.fireEvent('activate', item);
 195             }
 196         }
 197     }
 198 });
 199 Ext.Container.LAYOUTS.accordion = Ext.layout.AccordionLayout;
 200
 201 //backwards compat
 202 Ext.layout.Accordion = Ext.layout.AccordionLayout;