在项目实践的过程中,遇到需要将grid中数据根据某一字段分组的要求,当然,这个功能在api中有,在此列出来以供大家查找:

  两点需要注意的地方:

  1、在创建store时,需要设置groupField属性的值,即为需要分组的值

  for example:

JavaScript代码
  1. Ext.define('Person', {  
  2.     extend: 'Ext.data.Model',  
  3.     fields: ['name''sex']  
  4. });  

  在这个数据模型中,我们需要以性别(sex)分组,那么请看下面的store

JavaScript代码
  1. var PersonStore = Ext.create('Ext.data.Store', {  
  2.         storeId: 'PersonStore',  
  3.         model: 'Person',  
  4.         groupField: 'sex',  
  5.         data: [{  
  6.             name: 'hongmei li',  
  7.             sex: 'female'  
  8.         },{  
  9.             name: 'san zhang',  
  10.             sex: 'male'  
  11.         },{  
  12.             name: 'Jim Green',  
  13.             sex: 'male'  
  14.         },{  
  15.             name: 'Lily',  
  16.             sex: 'female'  
  17.         },{  
  18.             name: 'Lucy',  
  19.             sex: 'female'  
  20.         }]  
  21. });  

  接下来,我们需要定义分组显示的tpl

JavaScript代码
  1. var groupingFeature= Ext.create('Ext.grid.feature.Grouping',{  
  2.         groupHeaderTpl: 'sex: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'  
  3.     });//注意其中{name}即为store中sex列所对应的值  

  在gridPanel中,代码如下:配置features为上述定义的groupingFeature

JavaScript代码
  1. var grid = Ext.create('Ext.grid.Panel', {    
  2.     renderTo: Ext.getBody(),    
  3.     store: PersonStore,    
  4.     width: 600,    
  5.     height: 400,    
  6.     title: 'Person',    
  7.     features: [groupingFeature],    
  8.         columns: [{    
  9.         text: 'Name',    
  10.         flex: 1,    
  11.         dataIndex: 'name'    
  12.     },{    
  13.         text: 'sex',    
  14.         flex: 1,    
  15.         dataIndex: 'sex'    
  16.     }]    
  17. });    

  效果图如下:

Extjs中store分组功能的使用方法

  当然实现分组后,在gridPanel中sex这一列就可以不用显示。

  需要注意的是store中的数据如果在变化的时候,分组是不是也可以正常显示呢?

  现在给grid增加一个itemclick事件,代码如下:

JavaScript代码
  1. listeners:{    
  2.         itemclick:function(thisview,record){    
  3.         PersonStore.<span style="color:#ff0000;">add</span>([{name:"li",sex:"male"},{name:"zhang",sex:"female"}]);    
  4.         }    
  5.         }    

  效果如下图

Extjs中store分组功能的使用方法

  可以看出来,界面并不是我们想要的,那么如何解决呢?(最开?#21152;?#31528;的解决方案是我将此gridPanel移除并销毁掉,重新加载)我将listeners监听事件的代码做了一些变换

JavaScript代码
  1. listeners:{    
  2.     itemclick:function(thisview,record){    
  3.         PersonStore.loadData([{name:"li",sex:"male"},{name:"zhang",sex:"female"}],true);    
  4.     }    
  5. }       

  再看效果:

Extjs中store分组功能的使用方法

       这个就是我们想要的效果,在动态变化store中的数据时,分组也要实现,而不是将数据追加在gridPanel的最后。对应这两段代码的区分,主要在,store添加数据的方法,前者是add(record),后者是loadData(records,[append])

  起初不能理解为什么同样是store添加数据,效果却不一样,看官方文档的解释,add(),The new Model instances will be added at the end of the existing collection.(将数据追加在集合的最后)恍然大悟,loadData是按照store的规则将数据加载进来。

  另外,如?#25105;?#38500;组中最旧一行,自己动手查了一下,文档实现了,在这里与大家分享:

  //将前面的listeners监听事件修改如下:

  注意其中first([boolean group])方法,如果不传参数,获取的是store中的第一条数据,传参为true时,返回的是store分组以组名为key,组内第一条数据为value的多个对象,PersonStore.first(true).female获取female组内的第一条数据,想获取male中的,可以使用PersonStore.first(true).male

JavaScript代码
  1.  listeners:{  
  2.     itemclick:function(thisview,record){  
  3.         PersonStore.loadData([{name:"li",sex:"male"},{name:"zhang",sex:"female"}],true);  
  4.         alert(PersonStore.first(true).female.get('name'));  
  5.   
  6.         console.log(PersonStore.first(true).female);  
  7.         PersonStore.remove(PersonStore.first(true).female);  
  8.        // console.log(PersonStore.getAt(0));
  9.     }  
  10. }  

  为避免removedRecords占用内存,进行了进一步的处理,功能可以实现,但是方法有些笨,大家有好的办法可以交流交流

  ?#21019;?#30721;:

JavaScript代码
  1. listeners:{  
  2.     itemclick:function(thisview,record){  
  3.         PersonStore.loadData([{name:"li",sex:"male"},{name:"zhang",sex:"female"}],true);  
  4.           
  5.         alert(PersonStore.first(true).female.get('name'));  
  6.         console.log(PersonStore.first(true));  
  7.         PersonStore.remove(PersonStore.first(true).female);  
  8.         var recs = PersonStore.getRange();  
  9.         console.log(recs);  
  10.         //PersonStore.removeAll(true);//这句有没有都可以  
  11.         PersonStore.loadRecords(recs);//重新load数据,内存中记录的removed掉的就没有了  
  12.         console.log(PersonStore);  
  13.         alert(PersonStore.getRemovedRecords.length);//这句alert结果为0  
  14.        // console.log(PersonStore.getAt(0));  
  15.     }  
  16. }

 

除非特别注明,鸡啄米文章均为原创
转载请标明本文地址:http://www.ojizl5.fun/software/554.html
2016年4月20日
作者:鸡啄米 分类:软件开发 浏览: 评论:0