一、创建一个简单的DataView视图
var
touchTeam = Ext.create(
'Ext.DataView'
,{
fullscreen:
true
,
store:{
fields:[
'name'
,
'age'
],
data:[
{name:
'jamie Avins'
, age:
'100'
},
{name:
'Rob Dougan'
, age:
'21'
},
{name:
'小二'
, age:
'77'
},
{name:
'皇上'
, age:
'99'
},
{name:
'王爷'
, age:
'100'
}
]
},
itemTpl:
'{name}is {age}years old'
});
touchTeam.getStore().add({
name:
'云云'
,
age:18
});
touchTeam .getStore().getAt(0).
set
(
'age'
,42);
一、使用走马灯(Carousel)
Carousel(走马灯)组件，能够在一组全屏页面之间通过swipe(左右滑动/扫)动作来动态的切换组件。
Carousel同一时刻只显示一个全屏页面，你可以用手指扫一下来切换到其他页面上，
水平切换
Ext.create(
'Ext.Carousel'
,{
fullscreen:
true
,
defaults:{
styleHtmlContent:
true
},
items:[
{
html:
'items 1'
,
style:
'background-color:#5E99CC'
},
{
html:
'items 2'
,
style:
'background-color:#759E60'
},
{
html:
'items 3'
,
style:
'background-color:#000000'
}
]
});
垂直切换
Ext.create(
'Ext.Carousel'
,{
fullscreen:
true
,
direction:
'vertical'
,
defaults:{
styleHtmlContent:
true
},
items:[
{
html:
'items 1'
,
style:
'background-color:#5E99CC'
},
{
html:
'items 2'
,
style:
'background-color:#759E60'
},
{
html:
'items 3'
,
style:
'background-color:#000000'
}
]
});
可以将任何内容至于Carousel中，例放置一个list和form
Ext.create(
'Ext.Carousel'
,{
fullscreen:
true
,
defaults:{
styleHtmlContent:
true
},
items:[
{
xtype:
'list'
,
items:{
xtype:
'toolbar'
,
docked:
'top'
,
title:
'Sencha touch Team'
},
store:{
fields:[
'name'
],
data:[
{name:
'Rob'
},
{name:
'Ed'
},
{name:
'Jack'
},
{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'
}
]
},
{
html:
'items 3'
,
style:
'background-color:#5E99CC'
}
]
});
1692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
