Sencha Touch学习笔记（八）Carousel

Carousel直译成中文就是旋转木马的意思，现在好多手机App在第一次运行的时候的欢迎说明界面基本都是这种形式的。
在Sencha Touch中跟tabPanel类似，但是它可以通过滑动手势来切换左右视图，另外还有指示点，有几个指示点就代表了有几个视图。

Carousel也是一个容器，通过简单的配置，你可以横向或者纵向的切换视图。

    name: 'Sencha',

    launch: function() {

        Ext.create('Ext.Carousel', {
            fullscreen: true,

            defaults: {
                styleHtmlContent: true
            },

            items: [
                {
                    html : 'Item 1',
                    style: 'background-color: #5E99CC'
                },
                {
                    html : 'Item 2',
                    style: 'background-color: #759E60'
                },
                {
                    html : 'Item 3'
                }
            ]
        });
    }
});

我们再来一个纵向的：

Ext.application({
    name: 'Sencha',

    launch: function() {    
        Ext.create('Ext.Carousel', {
            fullscreen: true,
            direction: 'vertical',

            defaults: {
                styleHtmlContent: true
            },

            items: [
                {
                    html : 'Item 1',
                    style: 'background-color: #759E60'
                },
                {
                    html : 'Item 2',
                    style: 'background-color: #5E99CC'
                }
            ]
        });
    }
});

可见，当direction: ‘vertical’时 Carousel是纵向滑动的。
上面说了Carousel是个容器，所以你可以把任何组件放倒它的里面，比如一个列表，一组文本框

Ext.application({
    name: 'Sencha',

    launch: function() {

        Ext.create('Ext.Carousel', {
            fullscreen: true,

            items: [
                {
                    xtype: 'list',

                    items: {
                        xtype: 'toolbar',
                        docked: 'top',
                        title: 'Sencha Touch Team'
                    },

                    store: {
                        fields: ['name'],
                        data: [
                            {name: 'Rob'},
                            {name: 'Ed'},
                            {name: 'Jacky'},
                            {name: 'Jamie'},
                            {name: 'Tommy'},
                            {name: 'Abe'}
                        ]
                    },

                    itemTpl: '{name}'
                },
                {
                    xtype: 'fieldset',
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            title: 'Login'
                        },
                        {
                            xtype: 'textfield',
                            label: 'Name'
                        },
                        {
                            xtype: 'passwordfield',
                            label: 'Password'
                        }
                    ]
                }
            ]
        });
    }
});

其它属性，方法，配置，事件等详见API。