jQuery MiniUI,Ajax Web开发

移动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);//指定显示任何一个
这里指的是轮播显示的界面

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