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