docs/source/AccordionLayout.html

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