ExtJS4.2學習(10)分組表格控制項--GroupingGrid

分組表格控制項在我們的開發中經常被用到，GroupingGrid分組表格就是在普通表格的基礎上，根據某一列的資料顯示表格中的資料分組的表格控制項。舉個例子給大家，比如某些資訊用樹形顯示覺得有點大才小用，樹形可以有無限極，但是用了分組表格可以完美的展示資訊，看是我的項目中用到的一個例子，將所有評分項顯示出來，並且動態擷取是否有次數，如果有次數將出現可編輯，沒有次數就不可編輯，如果需要扣分就出現連結，沒有就不出現，這正好結合了我們前幾節學的知識，看下面的圖：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131229/121T31007-0.jpg" border="0" width="720" style="margin:0px;padding:0px;border:medium none;line-height:22.390625px;font-family:'宋體', arial, helvetica, 'san-serif';font-size:14px;background-color:#ffffff;" alt="e3928013ae22ce03d29dee09a5901d03.jpg" />
具體代碼：我這裡是在其他組件中彈出的這個分組表格控制項，所以大家看重點代碼即可，當時寫這個功能可花費了不少時間，大家好好研究哈~

    actions.push(         {             text: '評分',             iconCls: 'gradebtn',             listeners: {                 'click' : function() {                     var xg = Ext.grid;                                     var store = new Ext.data.GroupingStore({                             autoLoad:true,                             reader: new Ext.data.JsonReader({                                 root: 'data',                                 totalProperty: 'total',                                 remoteSort: true                             },                             [                                 {name:'groupid'},                                 {name:'groupname'},                                 {name:'itemid'},                                 {name:'itemgroupid'},                                 {name:'itemname'},                                 {name:'itemvalue'},                                 {name:'isnumber'},                                 {name:'status',type:'boolean'},                                 {name: 'desc'}                             ]),                             proxy: new Ext.data.HttpProxy({                                  url: window.webRoot + 'rest/qaitem/',                                  method: 'GET'                             }),                             sortInfo:{field: 'itemname', direction: "ASC"},                             groupField:'groupname'                     });                     var sm = new Ext.grid.CheckboxSelectionModel();                     /** 設定次數                    setNumber = function(v){                        console.info(v);                        var record = sm.getSelected();                        record.set('isNumber',v);                    }                     */                     var grid = new xg.EditorGridPanel({                         store: store,                         clicksToEdit: 1,                         stripeRows:true,                         sm: sm,                         listeners: {                             beforeedit: function(e) {                                 if (e.record.get("isnumber") == "NO") {                                     return false;                                 }else{                                     return true;                                 }                             }                         },                         columns: [                             {id:'itemname',header: "選項組名稱", width: 270, sortable: true, dataIndex: 'itemname'},                             {header: "次數", width: 30, sortable: true, dataIndex: 'isnumber',                                 editor: new Ext.form.NumberField(),                                 renderer: function(v,m,r){                                     return v;                                      /*                                    if(v =="YES"){                                        var showv = (r.data.isnumber=="YES"?'' : r.data.isNumber);                                        return  r.data.isNumber;//"<input type='text' value = '"+showv+"' size='7' onkeyup ='setNumber(this.value)' />";                                    }else if(v=="NO"){                                        return "不存在次數";                                    }else{                                        return "資料讀取失敗";                                    }                                    */                                 }                             },                             {dataIndex: 'groupid',hidden:true},                             {dataIndex: 'itemid',hidden:true},                             {dataIndex: 'itemgroupid',hidden:true},                             {dataIndex:'status',hidden:true},                             {header:'分值', width:20, sortable:true, dataIndex: 'itemvalue',                                 renderer: function(v,m,r){ //                                  m.css='x-grid-bak-blue';                                     var str = "<a href=\'#\'" /a>";                                     var str1 = "<a href=\'#\'" /a>";                                     if(r.data.isnumber != "NO" ){                                         return v;                                     }                                     return !r.data.status?str : str1;                                 }                             },                             {header: "評分選項組", width: 30, sortable: true, dataIndex: 'groupname'}                         ],                         view: new Ext.grid.GroupingView({                             forceFit:true,                             groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "項" : "個"]})'                         }),                         frame:true,                         loadMask:true,                         layout: 'fit',                         width: 950,                         height: 450                     });                                                         points = function(is){                         var r = sm.getSelected();                         if(r.data.isnumber != "NO"){                             //轉換成int操作  次數和是否扣分了                                                                     }                         r.set('fenshu', r.data.itemvalue);                         r.set('status',!is);                         r.commit();                     }                                                         var win = new Ext.Window({                         title:'質檢評分',                         width:955,                         height:515,                         region:'center',                         iconCls: 'gradebtn',                         layout: 'fit',                         resizable:true,                          modal:true,                         closeAction:'hide',                         items:[grid],                         buttons:[{                             text:'儲存',                             listeners : {                                 'click' : function() {                                     var fenshu = '',itemname ='';                                     var status = '',itemgroupid ='';                                     var isNumber = '',itemid='';                                     var groupid = '',grouptypeid='',groupname='';                                     for (var i = 0; i<store.data.items.length; i++) {                                         var rco = store.getAt(i);                                         if(i==store.data.items.length-1){                                             fenshu +=rco.get('itemvalue');                                             status += rco.get('status');                                             groupid += rco.get('groupid');                                             groupname += rco.get('groupname');                                             itemid += rco.get('itemid');                                             itemgroupid += rco.get('itemgroupid');                                             itemname += rco.get('itemname');                                             if(rco.get('isnumber')=='YES'||rco.get('isnumber')=='NO'||rco.get('isnumber')==''){                                                 isNumber += '0';                                             }else{                                                 isNumber += rco.get('isnumber')+'';                                             }                                         }else{                                             fenshu +=rco.get('itemvalue')+',';                                             status += rco.get('status')+',';                                             groupid += rco.get('groupid')+',';                                             groupname += rco.get('groupname')+',';                                             itemid += rco.get('itemid')+',';                                             itemgroupid += rco.get('itemgroupid')+',';                                             itemname += rco.get('itemname')+',';                                             if(rco.get('isnumber')=='YES'||rco.get('isnumber')=='NO'||rco.get('isnumber')==''){                                                 isNumber += '0,';                                             }else{                                                 isNumber += rco.get('isnumber')+',';                                             }                                         }                                     }                                     Ext.Ajax.request({                                         url : window.webRoot + 'rest/qaitemscore/',                                         params: {                                                 userId:'<%=userId%>',                                                 recordId:rec.get('id'),                                                 ani:rec.get('ani'),                                                 dnis:rec.get('dnis'),                                                 callType:rec.get('callType'),                                                 begintime:formatDateTime(rec.get('beginTime')),                                                 endtime:formatDateTime(rec.get('endTime')),                                                 length:rec.get('callTime'),                                                 extno:rec.get('extNo'),                                                 fileName:rec.get('fileName'),                                                 agentNo:rec.get('agentNo'),                                                 itemvalue: fenshu,                                                 status: status,                                                 isNumber: isNumber,                                                 groupid: groupid,                                                 grouptypeid: grouptypeid,                                                 groupname: groupname,                                                 itemid: itemid,                                                 itemgroupid: itemgroupid,                                                 itemname: itemname,                                                 callId: rec.get('callId'),                                                 assigenederid: rec.get('assigeneder')                                                 },                                         success: function(res) {                                             myMask.hide();                                             var respText = Ext.decode(res.responseText);                                              if(respText.code == 'OK') {                                                 Ext.Msg.alert('系統提示', '評分成功');                                                 close();                                             } else {                                                 Ext.Msg.alert('儲存失敗', respText.message + "" + respText.code + "）");                                             }                                         },                                         failure: function(res) {                                             myMask.hide();                                             var respText = Ext.decode(res.responseText);                                             Ext.Msg.alert('儲存失敗', respText.message + "" + respText.code + "）");                                         },                                         method: 'POST'                                     });                                 }                               }                         },{                             text:'取消',                             listeners : {                                   'click' : function() {                                     close();                                 }                             }                         }]                     }).show();                     var close=function(){                         win.hide();                     }                 }             }         }     );

面的是不是覺得有點複雜了？額。。我的錯，下面來看個簡單的：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131229/121T33592-1.jpg" border="0" style="margin:0px;padding:0px;border:medium none;line-height:22.390625px;font-family:'宋體', arial, helvetica, 'san-serif';font-size:14px;background-color:#ffffff;" alt="30aba30554a28539ea5983c72e0452c8.jpg" />
這個就簡單許多啦，看下主要代碼，相信聰明的你一定能明白：

var columns = [                {header:'編號',dataIndex:'id'},                {header:'性別',dataIndex:'sex'},                {header:'名稱',dataIndex:'name'},                {header:'描述',dataIndex:'descn'}                ]; var data = [             ['1','male','name1','descn1'],             ['2','female','name2','descn2'],             ['3','male','name3','descn3'],             ['4','female','name4','descn4'],             ['5','male','name5','descn5']             ];            var store = new Ext.data.ArrayStore({     fields:[             {name:'id'},             {name:'sex'},             {name:'name'},             {name:'descn'}             ],     data:data,     groupField:'sex', //確定哪一項分組     sorter:[{property:'id', //排序屬性         direction:'ASC'} //排序方式     ] });            var grid = new Ext.grid.GridPanel({     autoHeight:true,     store:store,     columns:columns,     features:[{ftype:'grouping'}],     renderTo:'grid' });

這裡的fields和data還是原來的樣本一樣，主要關注的是groupField，它確定通過哪一項進行分組。store可以設定sorter參數，這個參數對應的值有2項：property是排序的屬性，direction是排序的方式。我們把資料傳入，輸出顯示的就是分成一組一組的資料。但是，如果想顯示成我們期待的那種形式，還需要設定feature為grouping
另外，分組表格控制項的視圖是有特殊功效的，通過它可以實現分組表格專用的對應功能，如下代碼所示：

//分組表格視圖 Ext.get('expand').on('click',function(){     grid.view.features[0].expandAll(); }); Ext.get('collapse').on('click',function(){     grid.view.features[0].collapseAll(); }); Ext.get('one').on('click', function() {        var feature = grid.view.features[0];     if (feature.isExpanded('female')) {         feature.expand('female');         feature.collapse('female');     } else {         feature.collapse('female');         feature.expand('female');     }    });

當然實現上面的代碼功能必須要有3個button了，每個id設定對應的點擊事件，上例中expandAll()展示所有分組，collapseAll()摺疊所有分組。如果想自動判斷分組的狀態進行對應的摺疊或展開操作---當分組都已摺疊時執行展開所有分組，當分組都已展開時執行摺疊所有分組，這就需要我們自己寫代碼來判斷分組的狀態了。這部分還存在著一個初始化的小問題，每次雖然分組顯示的都是展開，但是feature.isExpanded()返回的都是false，所以要重複調用collapse()和expand()兩個函數，才能實現正常切換。
好了，現在你也來動手嘗試下吧。

連載中，請大家持續關注，本文出自我的個人網站思考者日記網

本文出自 “On My Way” 部落格，請務必保留此出處http://shuyangyang.blog.51cto.com/1685768/1339592