src/layout/container/AbstractCard.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * Abstract base class for {@link Ext.layout.container.Card Card layout}.
  17  * @private
  18  */
  19 Ext.define('Ext.layout.container.AbstractCard', {
  20
  21     /* Begin Definitions */
  22
  23     extend: 'Ext.layout.container.Fit',
  24
  25     /* End Definitions */
  26
  27     type: 'card',
  28
  29     sizeAllCards: false,
  30
  31     hideInactive: true,
  32
  33     /**
  34      * @cfg {Boolean} deferredRender
  35      * True to render each contained item at the time it becomes active, false to render all contained items
  36      * as soon as the layout is rendered.  If there is a significant amount of content or
  37      * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
  38      * true might improve performance.
  39      */
  40     deferredRender : false,
  41
  42     beforeLayout: function() {
  43         var me = this;
  44         me.getActiveItem();
  45         if (me.activeItem && me.deferredRender) {
  46             me.renderItems([me.activeItem], me.getRenderTarget());
  47             return true;
  48         }
  49         else {
  50             return this.callParent(arguments);
  51         }
  52     },
  53
  54     renderChildren: function () {
  55         if (!this.deferredRender) {
  56             this.getActiveItem();
  57             this.callParent();
  58         }
  59     },
  60
  61     onLayout: function() {
  62         var me = this,
  63             activeItem = me.activeItem,
  64             items = me.getVisibleItems(),
  65             ln = items.length,
  66             targetBox = me.getTargetBox(),
  67             i, item;
  68
  69         for (i = 0; i < ln; i++) {
  70             item = items[i];
  71             me.setItemBox(item, targetBox);
  72         }
  73
  74         if (!me.firstActivated && activeItem) {
  75             if (activeItem.fireEvent('beforeactivate', activeItem) !== false) {
  76                 activeItem.fireEvent('activate', activeItem);
  77             }
  78             me.firstActivated = true;
  79         }
  80     },
  81
  82     isValidParent : function(item, target, position) {
  83         // Note: Card layout does not care about order within the target because only one is ever visible.
  84         // We only care whether the item is a direct child of the target.
  85         var itemEl = item.el ? item.el.dom : Ext.getDom(item);
  86         return (itemEl && itemEl.parentNode === (target.dom || target)) || false;
  87     },
  88
  89     /**
  90      * Return the active (visible) component in the layout.
  91      * @returns {Ext.Component}
  92      */
  93     getActiveItem: function() {
  94         var me = this;
  95         if (!me.activeItem && me.owner) {
  96             me.activeItem = me.parseActiveItem(me.owner.activeItem);
  97         }
  98
  99         if (me.activeItem && me.owner.items.indexOf(me.activeItem) != -1) {
 100             return me.activeItem;
 101         }
 102
 103         return null;
 104     },
 105
 106     // @private
 107     parseActiveItem: function(item) {
 108         if (item && item.isComponent) {
 109             return item;
 110         }
 111         else if (typeof item == 'number' || item === undefined) {
 112             return this.getLayoutItems()[item || 0];
 113         }
 114         else {
 115             return this.owner.getComponent(item);
 116         }
 117     },
 118
 119     // @private
 120     configureItem: function(item, position) {
 121         this.callParent([item, position]);
 122         if (this.hideInactive && this.activeItem !== item) {
 123             item.hide();
 124         }
 125         else {
 126             item.show();
 127         }
 128     },
 129
 130     onRemove: function(component) {
 131         if (component === this.activeItem) {
 132             this.activeItem = null;
 133             if (this.owner.items.getCount() === 0) {
 134                 this.firstActivated = false;
 135             }
 136         }
 137     },
 138
 139     // @private
 140     getAnimation: function(newCard, owner) {
 141         var newAnim = (newCard || {}).cardSwitchAnimation;
 142         if (newAnim === false) {
 143             return false;
 144         }
 145         return newAnim || owner.cardSwitchAnimation;
 146     },
 147
 148     /**
 149      * Return the active (visible) component in the layout to the next card
 150      * @returns {Ext.Component} The next component or false.
 151      */
 152     getNext: function() {
 153         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
 154         //should come back in 4.1
 155         var wrap = arguments[0];
 156         var items = this.getLayoutItems(),
 157             index = Ext.Array.indexOf(items, this.activeItem);
 158         return items[index + 1] || (wrap ? items[0] : false);
 159     },
 160
 161     /**
 162      * Sets the active (visible) component in the layout to the next card
 163      * @return {Ext.Component} the activated component or false when nothing activated.
 164      */
 165     next: function() {
 166         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
 167         //should come back in 4.1
 168         var anim = arguments[0], wrap = arguments[1];
 169         return this.setActiveItem(this.getNext(wrap), anim);
 170     },
 171
 172     /**
 173      * Return the active (visible) component in the layout to the previous card
 174      * @returns {Ext.Component} The previous component or false.
 175      */
 176     getPrev: function() {
 177         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
 178         //should come back in 4.1
 179         var wrap = arguments[0];
 180         var items = this.getLayoutItems(),
 181             index = Ext.Array.indexOf(items, this.activeItem);
 182         return items[index - 1] || (wrap ? items[items.length - 1] : false);
 183     },
 184
 185     /**
 186      * Sets the active (visible) component in the layout to the previous card
 187      * @return {Ext.Component} the activated component or false when nothing activated.
 188      */
 189     prev: function() {
 190         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
 191         //should come back in 4.1
 192         var anim = arguments[0], wrap = arguments[1];
 193         return this.setActiveItem(this.getPrev(wrap), anim);
 194     }
 195 });
 196