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