Clear Up
SharpKit Reference

Card Class

Namespace: Ext.layout

Base Types

System.Object

Constructors

Name Description
Card(CardConfig)
Card()

Properties

Name Description
alias
alternateClassName * 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: * {@img ../guides/layouts/card.jpg} * * 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: * var panel = Ext.create('Ext.Panel', { layout: 'card', items: [ { html: "First Item" }, { html: "Second Item" }, { html: "Third Item" }, { html: "Fourth Item" } ] }); * panel.getLayout().{@link Ext.Container#setActiveItem setActiveItem}(1); * 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). Normally you're better off using a {@link Ext.tab.Panel tab panel} or a {@link Ext.carousel.Carousel carousel}. * For a more detailed overview of what layouts are and the types of layouts shipped with Sencha Touch 2, check out the [Layout Guide](#!/guide/layouts).
extend * 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: * {@img ../guides/layouts/card.jpg} * * 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: * var panel = Ext.create('Ext.Panel', { layout: 'card', items: [ { html: "First Item" }, { html: "Second Item" }, { html: "Third Item" }, { html: "Fourth Item" } ] }); * panel.getLayout().{@link Ext.Container#setActiveItem setActiveItem}(1); * 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). Normally you're better off using a {@link Ext.tab.Panel tab panel} or a {@link Ext.carousel.Carousel carousel}. * For a more detailed overview of what layouts are and the types of layouts shipped with Sencha Touch 2, check out the [Layout Guide](#!/guide/layouts).
© Copyright 2005-2011 SharpKit. All rights reserved.