Sencha touch 开发系列:容器组件:dataview,list
dataview就是数据展现组件
list是由dataview派生过来的, 美观了一些多些也多了一些功能，如分组显示，索引导航，disclose按钮...
下面我们就来学习下dataview的用法及list的用法，学习他们之后你需要了解啥时后用dataview啥时后用list就像上一篇一样，你需要知道你啥时用panel啥时用formpanel一样。
dataview最重要的两个配置就是store（数据源）itemtpl(数据项显示模板)
下面来一段小代码，实践中学习。
//创建一个全屏的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: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
]
},
//数据项显示模板
itemTpl: '{name} is {age} years old'
});
效果：
实在是太丑了，没法看。
我们把上面代码中的dataview改为list
//创建一个全屏的List
var touchTeam = Ext.create('Ext.dataview.List', {
fullscreen: true,
//数据源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
]
},
//数据项显示模板
itemTpl: '{name} is {age} years old'
});
效果:
整齐了很多吧，呵呵。所以如果你一点样式都不想玩，那么dataview你绝对伤不起。选list吧.
就这么点区别，这么简单？
当然不是了，下面我们继续dataview....
为了让dataview能够展示的好看一些，我们在itemtpl做点小动作
//创建一个全屏的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: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
]
},
//数据项显示模板
itemTpl: '<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is {age} years old</p>'
});
效果：
看起来和list基本一样了吧，这是啥在做怪呢：样式。
在itemTpl里面，数据项如何显示，只要你有过硬的html+css基础，你可以随便发挥。
基本显示没问题了，我们现在该玩下store了
如果我想在列表里面添加一项怎么办呢？
很简单，我们可以查看一下store的API，了解一些基本的数据操作
比如，我也想加入touchteam
那么我只需要一行代码
touchTeam.getStore().add({name:'刘江',age:15});或者使用insert方法
//创建一个全屏的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: 'Tommy Maintz', age: 24},
]
},
//数据项显示模板
itemTpl: '<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is {age} years old</p>'
});
//添加一项
touchTeam.getStore().add({name: '刘江',age: 13});
//指定位置添加一项
touchTeam.getStore().insert(0,{name: '刘江他弟',age: 11});
效果：
看到没，呵呵，当然你还可以调用remove或removeAt进行数据项移除.这里就不试了，你去code editor里面玩玩。
你还可以玩玩排序，如让显示按年年龄倒序：
touchTeam.getStore().sort("age","desc");
之前有同学问过，如何让一些合规则的数据高亮？
恩，是可行的而且在开发中常有这样的需求，我们又需要在itemTpl上下功夫了，比如我让年龄大于20岁的数字高亮下
代码：
//创建一个全屏的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: 'Tommy Maintz', age: 24},
]
},
//数据项显示模板(我在们tpl上下了点功夫，就做到了一些数据高亮)
itemTpl: '<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>'
});
//添加一项
touchTeam.getStore().add({name: '刘江',age: 13});
//指定位置添加一项
touchTeam.getStore().insert(0,{name: '刘江他弟',age: 11});
效果：
怎样，还不错吧。
当然我还需要再个性化一点，那怎么搞呢？简单的if无法处理我的需求了,那么我们还可以在tpl中添加函数，我们来完成让每个名字前面都加上一个团队名：touchteam
如何搞呢？
仍然是在itemtpl上下手。
代码：
//创建一个全屏的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: 'Tommy Maintz', age: 24},
]
},
//数据项显示模板(我在们tpl上下了点功夫，就做到了一些数据高亮)
itemTpl: Ext.create('Ext.XTemplate','<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name:this.addTeam} is <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>',{addTeam:function(value)
{
return "touchteam "+value;
}})
});
//添加一项
touchTeam.getStore().add({name: '刘江',age: 13});
//指定位置添加一项
touchTeam.getStore().insert(0,{name: '刘江他弟',age: 11});
效果：
OK了吧，在每一个名字前面加一个touchteam，呵呵，你可以按照你想要的去格式化需要显示的内容。
再扯下dataview的事件吧，然后再讲下list要不然.....呵呵
dataview有哪些事件呢，你可以通过API的events下看到，但有一些我们基本不用的，这里我讲一下常用的，常用的就是点击某一项然后做某事...
//创建一个全屏的DataView
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
scrollable:false,
//数据源
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
]
},
//数据项显示模板(我在们tpl上下了点功夫，就做到了一些数据高亮)
itemTpl: Ext.create('Ext.XTemplate','<p style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name:this.addTeam} is <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>',{addTeam:function(value)
{
return "touchteam "+value;
}})
});
//添加一项
touchTeam.getStore().add({name: '刘江',age: 13});
//指定位置添加一项
touchTeam.getStore().insert(0,{name: '刘江他弟',age: 11});
//添加item项tap(按)事件
touchTeam.on("itemtap",function(list,index,target,record,e,opt){
//alert("your name is "+record.get("name"));
var txt="your name is "+record.get("name");
//通常我们会点击一行后，然后跳到别一个 view去查看详情
var panel=Ext.create("Ext.Panel",{fullscreen:true,html:txt,items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){
//返回按钮事件
//显示列表页
Ext.Viewport.setActiveItem(touchTeam);
//销毁上次跳出的view
panel.destroy();
}}]}]});
//添加到容器
Ext.Viewport.add(panel);
//显示
Ext.Viewport.setActiveItem(panel);
});
touchTeam.on("itemtaphold",function(list,index,target,record,e,opt){
alert("长按后：your name is "+record.get("name"));
});
这次代码有些长,好好看备注吧
再看下效果
点击前：
点击一项后和长按一项后
怎样，能消化么？
其他事件，就不一一举例了。
开始玩我们的list了，它是dataview的儿子，所谓青出一蓝胜于蓝，所以它比list更强大更猛。
list除了具备dataview的所有特针外，还有上面提到的那些不同,下面我们一一来玩玩呗。
onItemDisclosure:如果为true或者一个 function 时，在每一项的右边出现一个可点击（三角）按钮
下来我们来体验他，并练习一些常和事件
认真看下面的代码哦：
var myList=Ext.create('Ext.List', {
fullscreen: true,
store: {
fields: ['name'],
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
itemTpl: '{name}',
//点击那个小三角会执行这里
onItemDisclosure:function(record,d,a,b,c)
{
//创建一个view，然后跳过去，还可以返回过来
var panel=Ext.create("Ext.Panel",{fullscreen:true,html:record.get("name"),items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){
//返回按钮事件
//显示列表页
Ext.Viewport.setActiveItem(myList);
//销毁上次跳出的view
panel.destroy();
}}]}]});
//添加到容器
Ext.Viewport.add(panel);
//显示
Ext.Viewport.setActiveItem(panel);
//停止事件冒泡，防止他执行itemtap事件
b.stopPropagation();
},
listeners: {
//先择一项会执行,只是执行一次
select: function(view, record) {
//Ext自带的 alert
Ext.Msg.alert('Selected!', 'You selected ' + record.get('name'));
},
//点击行时执行
itemtap:function(list,index,target,record,e)
{
//当然，你也可以在点击行的时候跳转到别一个view，看onItemDisclosure中的代码
Ext.Msg.alert("itemtap",record.get("name"));
}
}
});
代码有点多，但不算复杂吧。
多看备注哦，没啥要特别注意的。
我就们看下点击小三角后的效果吧
刚才说了list下还分组和索引功能呢
看代码
Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
sorters: 'lastName',
//分组函数
grouper: {
groupFn: function(record) {
return record.get('lastName')[0];
}
},
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
//创建一个全屏的list
var myList=Ext.create('Ext.List', {
fullscreen: true,
store: store,
//分组
grouped:true,
//索引栏
indexBar:true,
itemTpl: '{firstName}++++++{lastName}',
//点击那个小三角会执行这里
onItemDisclosure:function(record,d,a,b,c)
{
//创建一个view，然后跳过去，还可以返回过来
var panel=Ext.create("Ext.Panel",{fullscreen:true,html:record.get("name"),items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){
//返回按钮事件
//显示列表页
Ext.Viewport.setActiveItem(myList);
//销毁上次跳出的view
panel.destroy();
}}]}]});
//添加到容器
Ext.Viewport.add(panel);
//显示
Ext.Viewport.setActiveItem(panel);
//停止事件冒泡，防止他执行itemtap事件
b.stopPropagation();
},
listeners: {
//先择一项会执行,只是执行一次
select: function(view, record) {
//Ext自带的 alert
Ext.Msg.alert('Selected!', 'You selected ' + record.get('name'));
},
//点击行时执行
itemtap:function(list,index,target,record,e)
{
//当然，你也可以在点击行的时候跳转到别一个view，看onItemDisclosure中的代码
Ext.Msg.alert("itemtap",record.get("name"));
}
}
});
上面定义模型，创建store看不懂，先不要理。后面会讲
注意分组是对我们的store里面的数据分组，store必须提供一个分组函数，
其他的看注意看备注了
效果：
分组按我们的latstName的首字符进行分组了.
好了，dataview和list的基本功有都熟悉了么？他们有啥不同？你自己去体验，在code editor里面练习哈，多练有好处。
有问题的同学可以加入我们的社区或群：13453484在线提问，我尽速解答。
作者：Louja
出处：http://html5mob.cnblogs.com 同步在：http://html5mob.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。
