docs/source/AbstractCard.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-layout.container.AbstractCard'>/**
   2 </span> * @class Ext.layout.container.AbstractCard
   3  * @extends Ext.layout.container.Fit
   4  * &lt;p&gt;This layout manages multiple child Components, each is fit to the Container, where only a single child Component
   5  * can be visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
   6  * This class is intended to be extended or created via the layout:'card' {@link Ext.container.Container#layout} config,
   7  * and should generally not need to be created directly via the new keyword.&lt;/p&gt;
   8  * &lt;p&gt;The CardLayout's focal method is {@link #setActiveItem}.  Since only one panel is displayed at a time,
   9  * the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
  10  * the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
  11  * so that functionality must be provided by the developer.&lt;/p&gt;
  12  * &lt;p&gt;Containers that are configured with a card layout will have a method setActiveItem dynamically added to it.
  13  * &lt;pre&gt;&lt;code&gt;
  14       var p = new Ext.panel.Panel({
  15           fullscreen: true,
  16           layout: 'card',
  17           items: [{
  18               html: 'Card 1'
  19           },{
  20               html: 'Card 2'
  21           }]
  22       });
  23       p.setActiveItem(1);
  24    &lt;/code&gt;&lt;/pre&gt;
  25  * &lt;/p&gt;
  26  */
  27
  28 Ext.define('Ext.layout.container.AbstractCard', {
  29
  30     /* Begin Definitions */
  31
  32     extend: 'Ext.layout.container.Fit',
  33
  34     /* End Definitions */
  35
  36     type: 'card',
  37
  38     sizeAllCards: false,
  39
  40     hideInactive: true,
  41
  42 <span id='Ext-layout.container.AbstractCard-cfg-deferredRender'>    /**
  43 </span>     * @cfg {Boolean} deferredRender
  44      * True to render each contained item at the time it becomes active, false to render all contained items
  45      * as soon as the layout is rendered (defaults to false).  If there is a significant amount of content or
  46      * a lot of heavy controls being rendered into panels that are not displayed by default, setting this to
  47      * true might improve performance.
  48      */
  49     deferredRender : false,
  50
  51     beforeLayout: function() {
  52         var me = this;
  53         me.activeItem = me.getActiveItem();
  54         if (me.activeItem &amp;&amp; me.deferredRender) {
  55             me.renderItems([me.activeItem], me.getRenderTarget());
  56             return true;
  57         }
  58         else {
  59             return this.callParent(arguments);
  60         }
  61     },
  62
  63     onLayout: function() {
  64         var me = this,
  65             activeItem = me.activeItem,
  66             items = me.getVisibleItems(),
  67             ln = items.length,
  68             targetBox = me.getTargetBox(),
  69             i, item;
  70
  71         for (i = 0; i &lt; ln; i++) {
  72             item = items[i];
  73             me.setItemBox(item, targetBox);
  74         }
  75
  76         if (!me.firstActivated &amp;&amp; activeItem) {
  77             if (activeItem.fireEvent('beforeactivate', activeItem) !== false) {
  78                 activeItem.fireEvent('activate', activeItem);
  79             }
  80             me.firstActivated = true;
  81         }
  82     },
  83
  84     isValidParent : function(item, target, position) {
  85         // Note: Card layout does not care about order within the target because only one is ever visible.
  86         // We only care whether the item is a direct child of the target.
  87         var itemEl = item.el ? item.el.dom : Ext.getDom(item);
  88         return (itemEl &amp;&amp; itemEl.parentNode === (target.dom || target)) || false;
  89     },
  90
  91 <span id='Ext-layout.container.AbstractCard-method-getActiveItem'>    /**
  92 </span>     * Return the active (visible) component in the layout.
  93      * @returns {Ext.Component}
  94      */
  95     getActiveItem: function() {
  96         var me = this;
  97         if (!me.activeItem &amp;&amp; me.owner) {
  98             me.activeItem = me.parseActiveItem(me.owner.activeItem);
  99         }
 100
 101         if (me.activeItem &amp;&amp; me.owner.items.indexOf(me.activeItem) != -1) {
 102             return me.activeItem;
 103         }
 104
 105         return null;
 106     },
 107
 108     // @private
 109     parseActiveItem: function(item) {
 110         if (item &amp;&amp; item.isComponent) {
 111             return item;
 112         }
 113         else if (typeof item == 'number' || item === undefined) {
 114             return this.getLayoutItems()[item || 0];
 115         }
 116         else {
 117             return this.owner.getComponent(item);
 118         }
 119     },
 120
 121     // @private
 122     configureItem: function(item, position) {
 123         this.callParent([item, position]);
 124         if (this.hideInactive &amp;&amp; this.activeItem !== item) {
 125             item.hide();
 126         }
 127         else {
 128             item.show();
 129         }
 130     },
 131
 132     onRemove: function(component) {
 133         if (component === this.activeItem) {
 134             this.activeItem = null;
 135             if (this.owner.items.getCount() === 0) {
 136                 this.firstActivated = false;
 137             }
 138         }
 139     },
 140
 141     // @private
 142     getAnimation: function(newCard, owner) {
 143         var newAnim = (newCard || {}).cardSwitchAnimation;
 144         if (newAnim === false) {
 145             return false;
 146         }
 147         return newAnim || owner.cardSwitchAnimation;
 148     },
 149
 150 <span id='Ext-layout.container.AbstractCard-method-getNext'>    /**
 151 </span>     * Return the active (visible) component in the layout to the next card
 152      * @returns {Ext.Component}
 153      */
 154     getNext: function(wrap) {
 155         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
 156         //should come back in 4.1
 157
 158         var items = this.getLayoutItems(),
 159             index = Ext.Array.indexOf(items, this.activeItem);
 160         return items[index + 1] || (wrap ? items[0] : false);
 161     },
 162
 163 <span id='Ext-layout.container.AbstractCard-method-next'>    /**
 164 </span>     * Sets the active (visible) component in the layout to the next card
 165      */
 166     next: function(anim, wrap) {
 167         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
 168         //should come back in 4.1
 169
 170         return this.setActiveItem(this.getNext(wrap), anim);
 171     },
 172
 173 <span id='Ext-layout.container.AbstractCard-method-getPrev'>    /**
 174 </span>     * Return the active (visible) component in the layout to the previous card
 175      * @returns {Ext.Component}
 176      */
 177     getPrev: function(wrap) {
 178         //NOTE: Removed the JSDoc for this function's arguments because it is not actually supported in 4.0. This
 179         //should come back in 4.1
 180
 181         var items = this.getLayoutItems(),
 182             index = Ext.Array.indexOf(items, this.activeItem);
 183         return items[index - 1] || (wrap ? items[items.length - 1] : false);
 184     },
 185
 186 <span id='Ext-layout.container.AbstractCard-method-prev'>    /**
 187 </span>     * Sets the active (visible) component in the layout to the previous card
 188      */
 189     prev: function(anim, wrap) {
 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
 193         return this.setActiveItem(this.getPrev(wrap), anim);
 194     }
 195 });
 196 </pre></pre></body></html>