Sencha Touch 之 DataView数据视图/走马灯(Carousel)

来源：互联网发布：淘宝店主认证页面编辑：程序博客网时间：2024/05/15 06:31

一、创建一个简单的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'

}

]

});

0 0