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

 

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

cover

本地Docker部署Navidrome音乐服务器与远程访问听歌详细教程

avatar 云原生
cover

【docker系列】docker删除指定容器

avatar 云原生
cover

【Docker系列】制作基础镜像

avatar 云原生