docs/source/Accordion.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-layout-container-Accordion'>/**
  19 </span> * @class Ext.layout.container.Accordion
  20  * @extends Ext.layout.container.VBox
  21  * &lt;p&gt;This is a layout that manages multiple Panels in an expandable accordion style such that only
  22  * &lt;b&gt;one Panel can be expanded at any given time&lt;/b&gt;. Each Panel has built-in support for expanding and collapsing.&lt;/p&gt;
  23  * &lt;p&gt;Note: Only Ext.Panels &lt;b&gt;and all subclasses of Ext.panel.Panel&lt;/b&gt; may be used in an accordion layout Container.&lt;/p&gt;
  24  * {@img Ext.layout.container.Accordion/Ext.layout.container.Accordion.png Ext.layout.container.Accordion container layout}
  25  * &lt;p&gt;Example usage:&lt;/p&gt;
  26  * &lt;pre&gt;&lt;code&gt;
  27 Ext.create('Ext.panel.Panel', {
  28     title: 'Accordion Layout',
  29     width: 300,
  30     height: 300,
  31     layout:'accordion',
  32     defaults: {
  33         // applied to each contained panel
  34         bodyStyle: 'padding:15px'
  35     },
  36     layoutConfig: {
  37         // layout-specific configs go here
  38         titleCollapse: false,
  39         animate: true,
  40         activeOnTop: true
  41     },
  42     items: [{
  43         title: 'Panel 1',
  44         html: 'Panel content!'
  45     },{
  46         title: 'Panel 2',
  47         html: 'Panel content!'
  48     },{
  49         title: 'Panel 3',
  50         html: 'Panel content!'
  51     }],
  52     renderTo: Ext.getBody()
  53 });
  54 &lt;/code&gt;&lt;/pre&gt;
  55  */
  56 Ext.define('Ext.layout.container.Accordion', {
  57     extend: 'Ext.layout.container.VBox',
  58     alias: ['layout.accordion'],
  59     alternateClassName: 'Ext.layout.AccordionLayout',
  60
  61     align: 'stretch',
  62
  63 <span id='Ext-layout-container-Accordion-cfg-fill'>    /**
  64 </span>     * @cfg {Boolean} fill
  65      * True to adjust the active item's height to fill the available space in the container, false to use the
  66      * item's current height, or auto height if not explicitly set (defaults to true).
  67      */
  68     fill : true,
  69 <span id='Ext-layout-container-Accordion-cfg-autoWidth'>    /**
  70 </span>     * @cfg {Boolean} autoWidth
  71      * &lt;p&gt;&lt;b&gt;This config is ignored in ExtJS 4.x.&lt;/b&gt;&lt;/p&gt;
  72      * Child Panels have their width actively managed to fit within the accordion's width.
  73      */
  74     autoWidth : true,
  75 <span id='Ext-layout-container-Accordion-cfg-titleCollapse'>    /**
  76 </span>     * @cfg {Boolean} titleCollapse
  77      * &lt;p&gt;&lt;b&gt;Not implemented in PR2.&lt;/b&gt;&lt;/p&gt;
  78      * True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
  79      * expand/collapse only when the toggle tool button is clicked (defaults to true).  When set to false,
  80      * {@link #hideCollapseTool} should be false also.
  81      */
  82     titleCollapse : true,
  83 <span id='Ext-layout-container-Accordion-cfg-hideCollapseTool'>    /**
  84 </span>     * @cfg {Boolean} hideCollapseTool
  85      * True to hide the contained Panels' collapse/expand toggle buttons, false to display them (defaults to false).
  86      * When set to true, {@link #titleCollapse} is automatically set to &lt;code&gt;true&lt;/code&gt;.
  87      */
  88     hideCollapseTool : false,
  89 <span id='Ext-layout-container-Accordion-cfg-collapseFirst'>    /**
  90 </span>     * @cfg {Boolean} collapseFirst
  91      * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
  92      * in the contained Panels' title bars, false to render it last (defaults to false).
  93      */
  94     collapseFirst : false,
  95 <span id='Ext-layout-container-Accordion-cfg-animate'>    /**
  96 </span>     * @cfg {Boolean} animate
  97      * True to slide the contained panels open and closed during expand/collapse using animation, false to open and
  98      * close directly with no animation (defaults to &lt;code&gt;true&lt;/code&gt;). Note: The layout performs animated collapsing
  99      * and expanding, &lt;i&gt;not&lt;/i&gt; the child Panels.
 100      */
 101     animate : true,
 102 <span id='Ext-layout-container-Accordion-cfg-activeOnTop'>    /**
 103 </span>     * @cfg {Boolean} activeOnTop
 104      * &lt;p&gt;&lt;b&gt;Not implemented in PR4.&lt;/b&gt;&lt;/p&gt;
 105      * &lt;p&gt;Only valid when {@link #multi&quot; is &lt;code&gt;false&lt;/code&gt;.&lt;/p&gt;
 106      * True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
 107      * false to keep the panels in the rendered order. &lt;b&gt;This is NOT compatible with &quot;animate:true&quot;&lt;/b&gt; (defaults to false).
 108      */
 109     activeOnTop : false,
 110 <span id='Ext-layout-container-Accordion-cfg-multi'>    /**
 111 </span>     * @cfg {Boolean} multi
 112      * Defaults to &lt;code&gt;false&lt;/code&gt;. Set to &lt;code&gt;true&lt;/code&gt; to enable multiple accordion items to be open at once.
 113      */
 114     multi: false,
 115
 116     constructor: function() {
 117         var me = this;
 118
 119         me.callParent(arguments);
 120
 121         // animate flag must be false during initial render phase so we don't get animations.
 122         me.initialAnimate = me.animate;
 123         me.animate = false;
 124
 125         // Child Panels are not absolutely positioned if we are not filling, so use a different itemCls.
 126         if (me.fill === false) {
 127             me.itemCls = Ext.baseCSSPrefix + 'accordion-item';
 128         }
 129     },
 130
 131     // Cannot lay out a fitting accordion before we have been allocated a height.
 132     // So during render phase, layout will not be performed.
 133     beforeLayout: function() {
 134         var me = this;
 135
 136         me.callParent(arguments);
 137         if (me.fill) {
 138             if (!me.owner.el.dom.style.height || !me.getLayoutTargetSize().height) {
 139                 return false;
 140             }
 141         } else {
 142             me.owner.componentLayout.monitorChildren = false;
 143             me.autoSize = true;
 144             me.owner.setAutoScroll(true);
 145         }
 146     },
 147
 148     renderItems : function(items, target) {
 149         var me = this,
 150             ln = items.length,
 151             i = 0,
 152             comp,
 153             targetSize = me.getLayoutTargetSize(),
 154             renderedPanels = [],
 155             border;
 156
 157         for (; i &lt; ln; i++) {
 158             comp = items[i];
 159             if (!comp.rendered) {
 160                 renderedPanels.push(comp);
 161
 162                 // Set up initial properties for Panels in an accordion.
 163                 if (me.collapseFirst) {
 164                     comp.collapseFirst = me.collapseFirst;
 165                 }
 166                 if (me.hideCollapseTool) {
 167                     comp.hideCollapseTool = me.hideCollapseTool;
 168                     comp.titleCollapse = true;
 169                 }
 170                 else if (me.titleCollapse) {
 171                     comp.titleCollapse = me.titleCollapse;
 172                 }
 173
 174                 delete comp.hideHeader;
 175                 comp.collapsible = true;
 176                 comp.title = comp.title || '&amp;#160;';
 177
 178                 // Set initial sizes
 179                 comp.width = targetSize.width;
 180                 if (me.fill) {
 181                     delete comp.height;
 182                     delete comp.flex;
 183
 184                     // If there is an expanded item, all others must be rendered collapsed.
 185                     if (me.expandedItem !== undefined) {
 186                         comp.collapsed = true;
 187                     }
 188                     // Otherwise expand the first item with collapsed explicitly configured as false
 189                     else if (comp.hasOwnProperty('collapsed') &amp;&amp; comp.collapsed === false) {
 190                         comp.flex = 1;
 191                         me.expandedItem = i;
 192                     } else {
 193                         comp.collapsed = true;
 194                     }
 195                     // If we are fitting, then intercept expand/collapse requests.
 196                     me.owner.mon(comp, {
 197                         show: me.onComponentShow,
 198                         beforeexpand: me.onComponentExpand,
 199                         beforecollapse: me.onComponentCollapse,
 200                         scope: me
 201                     });
 202                 } else {
 203                     delete comp.flex;
 204                     comp.animCollapse = me.initialAnimate;
 205                     comp.autoHeight = true;
 206                     comp.autoScroll = false;
 207                 }
 208             }
 209         }
 210
 211         // If no collapsed:false Panels found, make the first one expanded.
 212         if (ln &amp;&amp; me.expandedItem === undefined) {
 213             me.expandedItem = 0;
 214             comp = items[0];
 215             comp.collapsed = false;
 216             if (me.fill) {
 217                 comp.flex = 1;
 218             }
 219         }
 220
 221         // Render all Panels.
 222         me.callParent(arguments);
 223
 224         // Postprocess rendered Panels.
 225         ln = renderedPanels.length;
 226         for (i = 0; i &lt; ln; i++) {
 227             comp = renderedPanels[i];
 228
 229             // Delete the dimension property so that our align: 'stretch' processing manages the width from here
 230             delete comp.width;
 231
 232             comp.header.addCls(Ext.baseCSSPrefix + 'accordion-hd');
 233             comp.body.addCls(Ext.baseCSSPrefix + 'accordion-body');
 234         }
 235     },
 236
 237     onLayout: function() {
 238         var me = this;
 239
 240
 241         if (me.fill) {
 242             me.callParent(arguments);
 243         } else {
 244             var targetSize = me.getLayoutTargetSize(),
 245                 items = me.getVisibleItems(),
 246                 len = items.length,
 247                 i = 0, comp;
 248
 249             for (; i &lt; len; i++) {
 250                 comp = items[i];
 251                 if (comp.collapsed) {
 252                     items[i].setWidth(targetSize.width);
 253                 } else {
 254                     items[i].setSize(null, null);
 255                 }
 256             }
 257         }
 258         me.updatePanelClasses();
 259
 260         return me;
 261     },
 262
 263     updatePanelClasses: function() {
 264         var children = this.getLayoutItems(),
 265             ln = children.length,
 266             siblingCollapsed = true,
 267             i, child;
 268
 269         for (i = 0; i &lt; ln; i++) {
 270             child = children[i];
 271
 272             if (siblingCollapsed) {
 273                 child.header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
 274             }
 275             else {
 276                 child.header.addCls(Ext.baseCSSPrefix + 'accordion-hd-sibling-expanded');
 277             }
 278
 279             if (i + 1 == ln &amp;&amp; child.collapsed) {
 280                 child.header.addCls(Ext.baseCSSPrefix + 'accordion-hd-last-collapsed');
 281             }
 282             else {
 283                 child.header.removeCls(Ext.baseCSSPrefix + 'accordion-hd-last-collapsed');
 284             }
 285             siblingCollapsed = child.collapsed;
 286         }
 287     },
 288
 289     // When a Component expands, adjust the heights of the other Components to be just enough to accommodate
 290     // their headers.
 291     // The expanded Component receives the only flex value, and so gets all remaining space.
 292     onComponentExpand: function(toExpand) {
 293         var me = this,
 294             it = me.owner.items.items,
 295             len = it.length,
 296             i = 0,
 297             comp;
 298
 299         for (; i &lt; len; i++) {
 300             comp = it[i];
 301             if (comp === toExpand &amp;&amp; comp.collapsed) {
 302                 me.setExpanded(comp);
 303             } else if (!me.multi &amp;&amp; (comp.rendered &amp;&amp; comp.header.rendered &amp;&amp; comp !== toExpand &amp;&amp; !comp.collapsed)) {
 304                 me.setCollapsed(comp);
 305             }
 306         }
 307
 308         me.animate = me.initialAnimate;
 309         me.layout();
 310         me.animate = false;
 311         return false;
 312     },
 313
 314     onComponentCollapse: function(comp) {
 315         var me = this,
 316             toExpand = comp.next() || comp.prev(),
 317             expanded = me.multi ? me.owner.query('&gt;panel:not([collapsed])') : [];
 318
 319         // If we are allowing multi, and the &quot;toCollapse&quot; component is NOT the only expanded Component,
 320         // then ask the box layout to collapse it to its header.
 321         if (me.multi) {
 322             me.setCollapsed(comp);
 323
 324             // If the collapsing Panel is the only expanded one, expand the following Component.
 325             // All this is handling fill: true, so there must be at least one expanded,
 326             if (expanded.length === 1 &amp;&amp; expanded[0] === comp) {
 327                 me.setExpanded(toExpand);
 328             }
 329
 330             me.animate = me.initialAnimate;
 331             me.layout();
 332             me.animate = false;
 333         }
 334         // Not allowing multi: expand the next sibling if possible, prev sibling if we collapsed the last
 335         else if (toExpand) {
 336             me.onComponentExpand(toExpand);
 337         }
 338         return false;
 339     },
 340
 341     onComponentShow: function(comp) {
 342         // Showing a Component means that you want to see it, so expand it.
 343         this.onComponentExpand(comp);
 344     },
 345
 346     setCollapsed: function(comp) {
 347         var otherDocks = comp.getDockedItems(),
 348             dockItem,
 349             len = otherDocks.length,
 350             i = 0;
 351
 352         // Hide all docked items except the header
 353         comp.hiddenDocked = [];
 354         for (; i &lt; len; i++) {
 355             dockItem = otherDocks[i];
 356             if ((dockItem !== comp.header) &amp;&amp; !dockItem.hidden) {
 357                 dockItem.hidden = true;
 358                 comp.hiddenDocked.push(dockItem);
 359             }
 360         }
 361         comp.addCls(comp.collapsedCls);
 362         comp.header.addCls(comp.collapsedHeaderCls);
 363         comp.height = comp.header.getHeight();
 364         comp.el.setHeight(comp.height);
 365         comp.collapsed = true;
 366         delete comp.flex;
 367         comp.fireEvent('collapse', comp);
 368         if (comp.collapseTool) {
 369             comp.collapseTool.setType('expand-' + comp.getOppositeDirection(comp.collapseDirection));
 370         }
 371     },
 372
 373     setExpanded: function(comp) {
 374         var otherDocks = comp.hiddenDocked,
 375             len = otherDocks ? otherDocks.length : 0,
 376             i = 0;
 377
 378         // Show temporarily hidden docked items
 379         for (; i &lt; len; i++) {
 380             otherDocks[i].show();
 381         }
 382
 383         // If it was an initial native collapse which hides the body
 384         if (!comp.body.isVisible()) {
 385             comp.body.show();
 386         }
 387         delete comp.collapsed;
 388         delete comp.height;
 389         delete comp.componentLayout.lastComponentSize;
 390         comp.suspendLayout = false;
 391         comp.flex = 1;
 392         comp.removeCls(comp.collapsedCls);
 393         comp.header.removeCls(comp.collapsedHeaderCls);
 394         comp.fireEvent('expand', comp);
 395         if (comp.collapseTool) {
 396             comp.collapseTool.setType('collapse-' + comp.collapseDirection);
 397         }
 398         comp.setAutoScroll(comp.initialConfig.autoScroll);
 399     }
 400 });</pre>
 401 </body>
 402 </html>