HTML5开发移动web应用——Sencha Touch篇(4)

var carousel1 = Ext.create('Ext.Carousel',{
ui:'dark',
flex:1,
direction:'horizontal',//这是水平的轮播
defaults:{
styleHtmlContent:true
},
items:[
{
html:'left',
style:'background-color:pink'
},
{
html:'middle',
style:'background-color:red'
},
{
html:'bottmom',
style:'background-color:yellow'
}
]
});
carousel插件中可以定义direction属性，horizontal为水平轮播，vertical为垂直轮播。
items属性为轮播添加每一个页面，这种用法在之前已经用的很多了。每个item中，用html设置其中的html内容，style设置页面的样式
最后再把定义好的carousel1组件放到layout中即可
这里我们介绍一个新的用法：default
default类似于css的*选择器，它定义了属于这个范围内的元素的一些默认属性。但是如果你想修改其中个别的属性，可以像在css中那样重新定义相应属性。下面是一个使用default的例子：
var formPanel = Ext.create('Ext.form.Panel',{
id:'formPanel',
scrollable:'vertical',
items:[{
xtype:'fieldset',
title:'Movie Information',
instructions:'Please enter the information of the movie',
defaults:{
labelwidth:'20%'
},
items:[
{
xtype:'textfield',
id:'txt_title',
name:'title',
label:'Title',
placeHolder:'title of the movie',
required:true,//设置为必填选项
clearIcon:true
},
{
xtype:'textfield',
id:'txt_director',
name:'director',
label:'Director',
placeHolder:'name of the director',
clearIcon:true
}
]
}]
});

Sencha Touch中提供了许多组件，这一次以轮播组件（carousel）为引子，介绍一下Sencha Touch组件的使用方法。

以下先给出轮播插件的具体实现方法：

这里使用default定义了在这个fieldset中的默认labelwidth属性值都为20&（有很多陌生的地方暂且不用管，以后会说到）

此外，轮播组件还有以下其他属性：

carousel.next();//显示之前一个

carousel.prev();//显示之后一个

carousel.setActiveItem(1);//指定显示任何一个

这里指的是轮播显示的界面