移动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'
}
]
});

最后再把定义好的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);//指定显示任何一个
这里指的是轮播显示的界面

作者： fareise
原文： http://blog.csdn.net/fareise/article/details/50544763