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);//指定显示任何一个

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

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！