本文介绍了如何使用 Sencha Touch 创建 DataViews 和 Carousel 组件，并展示了如何配置这些组件以展示不同的内容，包括列表和表单。
一、创建一个简单的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'
}
]
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
