本文详细介绍了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里面练习哈，多练有好处。
扫一扫
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
