/** * @class Ext.layout.Card * @extend Ext.layout.Auto * @alias layout.card * * 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 the gray box is our Container, and the blue box inside it is the currently active card. The three other cards * are hidden from view, but can be swapped in later. While it's not too common to create Card layouts directly, you * can do so like this: * * <Container> * <Panel html="Card One" /> * <Panel html="Card Two" /> * <Panel html="Card Three" /> * <Panel html="Card Four" /> * </Container> * * Here we create a Container with a Card Layout. Normally you're better off using a {@link Ext.tab.Panel tab panel} or a * {@link Ext.carousel.Carousel carousel}. */ /** * @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`). */ /** * @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. */ /** * @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. * @accessor */ /** * @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 */