/** * Sometimes you want to show several screens worth of information but you've only got a small screen to work with. * TabPanels and Carousels both enable you to see one screen of many at a time, and underneath they both use a Card * Layout. * * Card Layout takes the size of the Container it is applied to and sizes the currently active item to fill the * Container completely. It then hides the rest of the items, allowing you to change which one is currently visible but * only showing one at once. * * Here we create a Panel with a Card Layout and later set the second item active (the active item index is zero-based, * so 1 corresponds to the second item). You might consider using a {@link Ext.tab.Panel tab panel} or a * {@link Ext.carousel.Carousel carousel}. * * var panel = Ext.create('Ext.Panel', { * layout: 'card', * items: [ * { * html: "First Item" * }, * { * html: "Second Item" * }, * { * html: "Third Item" * }, * { * html: "Fourth Item" * } * ] * }); * * panel.setActiveItem(1); // make "Second Item" card visible * * You may specify an animation type for how activating cards looks to the user. Without * an animation specified, the cards will immediately appear as setActiveItem() is called. * The animation config may be a string or an object:of the form: * animation: { * type: one of 'cover', 'cube', 'fade', 'flip', 'pop', 'reveal', 'scroll', or 'slide', * direction: (optional) one of 'up', 'down', 'left', or 'right' * } * * Or the animation config may be a string, one of 'cover', 'cube', 'fade', 'flip', 'pop', * 'reveal', 'scroll', or 'slide' * * If an animation type is specified, the direction of the animation will be chosen based * upon the animation's initial direction left/right (horizontal) or up/down (vertical). * If the new card setActiveItem index is less than the current card's, then a right (or down) * animation will be applied. If the new card index is greater, then a left (or up) animation * is applied. * * If you call setAnimation() with an animation config or instance, the animation direction will * obey what you specify - the direction will not be chosen automatically. */Ext.define('Ext.layout.Card', { extend: 'Ext.layout.Auto', alias: 'layout.card', type: 'card', isCard: true, /** * @cfg {String/Object} animation * The animation to use when switching between cards. The possible animation * types are: * - `'cover'` * - `'cube'` * - `'fade'` * - `'flip'` * - `'pop'` * - `'reveal'` * - `'scroll'` * - `'slide'` * * If a string, the value should be one of the above types. If an object, the type * should be one of the above types. * * @cfg {Number} [animation.duration] * The duration of the animation. * * @cfg {String} [animation.direction] * * For animations that support a direction, the direction of the animation can be specified. The possible values are: * - `'horizontal'` * - `'vertical'` * - `'top'` * - `'right'` * - `'bottom'` * - `'left'` * * If a particular direction is specified (`top`/`right`/`bottom`/`left`), then the layout * will always animate in that direction. If `horizontal`/`vertical` is used, the direction * will be determined based on the position in the items collection. If the new item is before the * current item, the direction will be "back" (`left`/`top`). If the new item is after the current item, * the direction will be "forward" (`right`/`top`). */ /** * @event activeitemchange * @preventable * Fires when an card is made active * @param {Ext.layout.Card} this The layout instance * @param {Mixed} newActiveItem The new active item * @param {Mixed} oldActiveItem The old active item */ config: { /** * @cfg {Ext.Indicator} indicator * Creates an {@link Ext.Indicator} instance that can be used to visualize * the number of items and which item is active. */ indicator: { lazy: true, $value: { xtype: 'indicator', flex: 1 } } }, /** * @cfg {Boolean} [deferRender=true] * By default, items not initially shown in the Card layout are rendered when first shown. This provides * a performance benefit, but if the hidden items contain components that are bound, the bindings do not * immediately take effect. If you have a form with bnound fields that spans several cards, the initially * hidden items won't have their values bound and validation will not be done properly. In those cases, * you will want to set deferRender to false. */ deferRender: true, cls: Ext.baseCSSPrefix + 'layout-card', itemCls: Ext.baseCSSPrefix + 'layout-card-item', requires: [ 'Ext.Indicator', 'Ext.layout.card.fx.*' ], /** * @private */ applyAnimation: function(animation) { return animation ? new Ext.Factory.layoutCardFx(animation) : null; }, /** * @private */ updateAnimation: function(animation, oldAnimation) { var me = this, direction; me.autoDirection = null; if (animation && animation.isAnimation) { animation.setLayout(me); direction = animation.getDirection(); if (!direction || me.autoDirectionMap[direction]) { me.autoDirection = direction || 'horizontal'; // If we got horizontal or vertical, clear it out animation.setDirection(null); } } if (oldAnimation) { oldAnimation.destroy(); } }, applyIndicator: function (indicator, currentIndicator) { return Ext.updateWidget(currentIndicator, indicator, this, 'createIndicator'); }, createIndicator: function (indicator) { return Ext.apply({ ownerCmp: this.getContainer() }, indicator); }, updateIndicator: function (indicator) { if (indicator) { var container = this.getContainer(), innerItems = container.getInnerItems(), activeItem = container.getActiveItem(); indicator .sync(innerItems.length, innerItems.indexOf(activeItem)) .on({ indicatortap: 'onIndicatorTap', next: 'next', previous: 'previous', scope: this }); } }, onContainerInitialized: function() { var me = this, container = me.getContainer(), firstItem = container.getInnerAt(0), activeItem = container.getActiveItem(); me.callParent(); if (activeItem) { // Don't call showItem here, since the component will get rendered by the // render cycle activeItem.show(); if (firstItem && firstItem !== activeItem) { firstItem.hide(); } } container.on('activeitemchange', 'onContainerActiveItemChange', me); }, /** * @private */ onContainerActiveItemChange: function(container, newItem, oldItem) { var me = this, innerItems = container.getInnerItems(), newIndex = innerItems.indexOf(newItem), oldIndex = innerItems.indexOf(oldItem), animation = me.getAnimation(), autoDirection = me.autoDirection, horizontal = autoDirection && autoDirection === 'horizontal', direction; if (autoDirection && newIndex !== -1 && oldIndex !== -1) { if (newIndex < oldIndex) { direction = horizontal ? 'right' : 'up'; } else { direction = horizontal ? 'left' : 'down'; } animation.setDirection(direction); } me.fireEventedAction('activeitemchange', [me, newItem, oldItem], 'doActiveItemChange', me); }, onItemInnerStateChange: function(item, isInner, destroying) { this.callParent([item, isInner, destroying]); var container = this.getContainer(), activeItem = container.getActiveItem(); if (isInner) { if (activeItem !== container.innerIndexOf(item) && activeItem !== item && item !== container.pendingActiveItem) { item.hide(); } } else { if (!destroying && !item.destroyed && item.destroying !== true) { item.show(); } } }, /** * @private */ doActiveItemChange: function(me, newActiveItem, oldActiveItem) { var indicator = me.getConfig('indicator', null, true), container, innerItems; if (oldActiveItem && !oldActiveItem.destroyed) { oldActiveItem.hide(); } if (newActiveItem && !newActiveItem.destroyed) { me.showItem(newActiveItem); if (indicator) { container = this.getContainer(); innerItems = container.getInnerItems(); indicator.setActiveIndex(innerItems.indexOf(newActiveItem)); } } }, onItemAdd: function (item, index) { var indicator, style; this.callParent([item, index]); if (item.isInnerItem()) { indicator = this.getConfig('indicator', null, true); if (indicator) { indicator.add(); } // Clear any styles as they come in, we should be // 100% 100% style = item.element.dom.style; style.width = style.height = ''; } }, onItemRemove: function (item, index, destroying) { var indicator, w, h; this.callParent([item, index, destroying]); if (item.isInnerItem()) { indicator = this.getConfig('indicator', null, true); if (indicator) { indicator.remove(); } // Restore inline sizes on the way out w = item.getWidth(); h = item.getHeight(); item.setWidth(null).setWidth(w); item.setHeight(null).setHeight(w); } }, /** * Moves to the next item if not on the last item. */ next: function () { var container = this.getContainer(), activeItem = container.getActiveItem(), innerItems = container.getInnerItems(), index = innerItems.indexOf(activeItem); activeItem = innerItems[index + 1]; if (activeItem) { container.setActiveItem(activeItem); } }, /** * Moves to the previous item if not on the first item. */ previous: function () { var container = this.getContainer(), activeItem = container.getActiveItem(), innerItems = container.getInnerItems(), index = innerItems.indexOf(activeItem); activeItem = innerItems[index - 1]; if (activeItem) { container.setActiveItem(activeItem); } }, onIndicatorTap: function (indicator, index) { var container = this.getContainer(); container.setActiveItem(index); }, destroy: function() { Ext.destroy(this.getAnimation(), this.getIndicator()); this.callParent(); }, privates: { autoDirectionMap: { horizontal: 1, vertical: 1 }, renderInnerItem: function(item, asRoot) { if (!this.deferRender || this.getContainer().getActiveItem() === item) { this.callParent([item, asRoot]); } }, showItem: function(item) { item.show(); if (this.getContainer().rendered) { item.setRendered(true, true); } } }});