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里面练习哈，多练有好处。