src/src/layout/Card.js

   1 /**
   2  * Sometimes you want to show several screens worth of information but you've only got a small screen to work with.
   3  * TabPanels and Carousels both enable you to see one screen of many at a time, and underneath they both use a Card
   4  * Layout.
   5  *
   6  * Card Layout takes the size of the Container it is applied to and sizes the currently active item to fill the
   7  * Container completely. It then hides the rest of the items, allowing you to change which one is currently visible but
   8  * only showing one at once:
   9  *
  10  * {@img ../guides/layouts/card.jpg}
  11  *
  12  *
  13  * Here the gray box is our Container, and the blue box inside it is the currently active card. The three other cards
  14  * are hidden from view, but can be swapped in later. While it's not too common to create Card layouts directly, you
  15  * can do so like this:
  16  *
  17  *     var panel = Ext.create('Ext.Panel', {
  18  *         layout: 'card',
  19  *         items: [
  20  *             {
  21  *                 html: "First Item"
  22  *             },
  23  *             {
  24  *                 html: "Second Item"
  25  *             },
  26  *             {
  27  *                 html: "Third Item"
  28  *             },
  29  *             {
  30  *                 html: "Fourth Item"
  31  *             }
  32  *         ]
  33  *     });
  34  *
  35  *     panel.{@link Ext.Container#setActiveItem setActiveItem}(1);
  36  *
  37  * Here we create a Panel with a Card Layout and later set the second item active (the active item index is zero-based,
  38  * so 1 corresponds to the second item). Normally you're better off using a {@link Ext.tab.Panel tab panel} or a
  39  * {@link Ext.carousel.Carousel carousel}.
  40  *
  41  * For a more detailed overview of Sencha Touch 2 layouts, check out the
  42  * [Layout Guide](../../../core_concepts/layouts.html).
  43  */
  44
  45
  46 Ext.define('Ext.layout.Card', {
  47     extend: 'Ext.layout.Default',
  48
  49     alias: 'layout.card',
  50
  51     isCard: true,
  52
  53     /**
  54      * @event activeitemchange
  55      * @preventable doActiveItemChange
  56      * Fires when an card is made active
  57      * @param {Ext.layout.Card} this The layout instance
  58      * @param {Mixed} newActiveItem The new active item
  59      * @param {Mixed} oldActiveItem The old active item
  60      */
  61
  62     layoutClass: 'x-layout-card',
  63
  64     itemClass: 'x-layout-card-item',
  65
  66     requires: [
  67         'Ext.fx.layout.Card'
  68     ],
  69
  70     /**
  71      * @private
  72      */
  73     applyAnimation: function(animation) {
  74         return new Ext.fx.layout.Card(animation);
  75     },
  76
  77     /**
  78      * @private
  79      */
  80     updateAnimation: function(animation, oldAnimation) {
  81         if (animation && animation.isAnimation) {
  82             animation.setLayout(this);
  83         }
  84
  85         if (oldAnimation) {
  86             oldAnimation.destroy();
  87         }
  88     },
  89
  90     setContainer: function(container) {
  91         this.callSuper(arguments);
  92
  93         container.innerElement.addCls(this.layoutClass);
  94         container.onInitialized('onContainerInitialized', this);
  95     },
  96
  97     onContainerInitialized: function() {
  98         var container = this.container,
  99             firstItem = container.getInnerAt(0),
 100             activeItem = container.getActiveItem();
 101
 102         if (activeItem) {
 103             activeItem.show();
 104             if(firstItem && firstItem !== activeItem) {
 105                 firstItem.hide();
 106             }
 107         }
 108
 109         container.on('activeitemchange', 'onContainerActiveItemChange', this);
 110     },
 111
 112     /**
 113      * @private
 114      */
 115     onContainerActiveItemChange: function(container) {
 116         this.relayEvent(arguments, 'doActiveItemChange');
 117     },
 118
 119     onItemInnerStateChange: function(item, isInner, destroying) {
 120         this.callSuper(arguments);
 121         var container = this.container,
 122             activeItem = container.getActiveItem();
 123
 124         item.toggleCls(this.itemClass, isInner);
 125         item.setLayoutSizeFlags(isInner ? container.LAYOUT_BOTH : 0);
 126
 127         if (isInner) {
 128             if (activeItem !== container.innerIndexOf(item) && activeItem !== item && item !== container.pendingActiveItem) {
 129                 item.hide();
 130             }
 131         }
 132         else {
 133             if (!destroying && !item.isDestroyed && item.isDestroying !== true) {
 134                 item.show();
 135             }
 136         }
 137     },
 138
 139     /**
 140      * @private
 141      */
 142     doActiveItemChange: function(me, newActiveItem, oldActiveItem) {
 143         if (oldActiveItem) {
 144             oldActiveItem.hide();
 145         }
 146
 147         if (newActiveItem) {
 148             newActiveItem.show();
 149         }
 150     },
 151
 152     destroy:  function () {
 153         this.callParent(arguments);
 154         Ext.destroy(this.getAnimation());
 155     }
 156 });