分组表格控件在我们的开发中经常被用到，GroupingGrid分组表格就是在普通表格的基础上，根据某一列的数据显示表格中的数据分组的表格控件。举个例子给大家，比如某些信息用树形显示觉得有点大才小用，树形可以有无限极，但是用了分组表格可以完美的展示信息，看下图是我的项目中用到的一个例子，将所有评分项显示出来，并且动态获取是否有次数，如果有次数将出现可编辑，没有次数就不可编辑，如果需要扣分就出现链接，没有就不出现，这正好结合了我们前几节学的知识，看下面的图：

具体代码：我这里是在其他组件中弹出的这个分组表格控件，所以大家看重点代码即可，当时写这个功能可花费了不少时间，大家好好研究哈~

    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='javascript:void(0);'>"+v+"</a>"; var str1 = "<a href='javascript:void(0);'>取消</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(); } } } } );

面的是不是觉得有点复杂了？额。。我的错，下面来看个简单的：

这个就简单许多啦，看下主要代码，相信聪明的你一定能明白：

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()两个函数，才能实现正常切换。
好了，现在你也来动手尝试下吧。

连载中，请大家持续关注，本文出自我的个人网站思考者日记网