在項目實踐的過程中,遇到需要將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分組功能的使用方法

  可以看出來,界面并不是我們想要的,那么如何解決呢?(最開始愚笨的解決方案是我將此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的規則將數據加載進來。

  另外,如何移除組中最舊一行,自己動手查了一下,文檔實現了,在這里與大家分享:

  //將前面的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占用內存,進行了進一步的處理,功能可以實現,但是方法有些笨,大家有好的辦法可以交流交流

  看代碼:

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