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。