grid++report5.5如何设置分组头？
[问题点数：60分，无满意结帖，结帖人nanwushi11]
grid++report5.5如何设置分组头？
[问题点数：60分，无满意结帖，结帖人nanwushi11]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。[ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
本文以一个实际例子，使用了extjs的gridpanel中的分组统计显示功能，涉及知识点：
Ext.grid.Panel model/store store中的data grid中的features以及其中ftype: 'groupingsummary'等
一、先看效果图：
可以看到图片显示的安装月份进行了分组显示 在每个分组下面会有合计和平均值显示。我这个例子在IE8和谷歌以及火狐浏览器下均正常显示。
二、贴上所有的代码(其实就只有一个jsp页面就足够了)
&%@ page contentType=text/ charset=UTF-8 %&
String context = request.getContextPath();
&script type=text/javascript&
window.context = ;
&/script&&script type=text/javascript src=&/script&&script type=text/javascript src=&/script&&script type=text/javascript src=&/script&&script type=text/javascript &
Ext.onReady(function(){
var data = [{
factory:'第一家维修公司', date:'2014-05', cost:52492.0, costav:52492.0
factory:'第二家维修公司', date:'2014-05', cost:760.0, costav:760.0
factory:'第三家维修公司', date:'2014-05', cost:1807.0, costav:1807.0
factory:'第一家维修公司', date:'2014-06', cost:4921.0, costav:4921.0
factory:'第二家维修公司', date:'2014-06', cost:1020.0, costav:1020.0
factory:'第三家维修公司', date:'2014-06', cost:1637.0, costav:1637.0
factory:'第一家维修公司', date:'2014-07', cost:48150.0, costav:48150.0
factory:'第二家维修公司', date:'2014-07', cost:7940.0, costav:7940.0}];
var store = Ext.create('Ext.data.Store', {
fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}],
groupField: 'date',
data: data
var grid = Ext.create('Ext.grid.Panel', {
frame: true,
height: 800,
columnLines: true, // 加上表格线
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}'+'月份车辆美容及维修费用',
hideGroupedHeader: false,
enableGroupingMenu: false
ftype: 'summary',
summaryType: 'average',
dock: 'bottom'
renderTo: Ext.getBody(),
columns: [{
text: '维修时间', dataIndex: 'date',width:100,
summaryRenderer: function(value, summaryData, dataIndex) {
return '合计'}
text: '维修费用(元)', dataIndex: 'cost', width:180,
field: { xtype: 'numberfield'},
summaryType: 'sum',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return value + ' 元'},
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' 元'}
text: '维修厂家', dataIndex: 'factory',width:120,
summaryRenderer: function(value, summaryData, dataIndex) {
return '平均值'}
text: '', dataIndex: 'costav', width:180,
field: {xtype: 'numberfield'},
summaryType: 'average',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return ''},//这列最后显示平均值 暂时这样转换显示
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' 元'}
store: store
grid.show();
&/script&这个随便起名一个jsp就可以啦。
里面使用了一个日期选择控件，只可以选择年月的。顺便也贴一下代码吧
/** Months picker
重写 field.Date
Ext.define('app.ux.Month', {
extend:'Ext.form.field.Date',
alias: 'widget.monthfield',
requires: ['Ext.picker.Month'],
alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],
selectMonth: null,
createPicker: function() {
var me = this,
format = Ext.String.
return Ext.create('Ext.picker.Month', {
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
listeners: {
{ scope: me,
fn: me.onSelect
monthdblclick: { scope: me,
fn: me.onOKClick
yeardblclick:
{ scope: me,
fn: me.onOKClick
{ scope: me,
fn: me.onOKClick
CancelClick:
{ scope: me,
fn: me.onCancelClick }
keyNavConfig: {
esc: function() {
me.collapse();
onCancelClick: function() {
me.selectMonth =
me.collapse();
onOKClick: function() {
if( me.selectMonth ) {
me.setValue(me.selectMonth);
me.fireEvent('select', me, me.selectMonth);
me.collapse();
onSelect: function(m, d) {
me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]);
/** Months picker **/
知识点梳理：
①。显示的数据，这里整理好了一些数据，在实际中，我们可以通过查询获取，分组查询便可。
var data = [{
factory:'第一家维修公司', date:';, cost:52492.0, costav:52492.0
factory:'第二家维修公司', date:';, cost:760.0, costav:760.0
factory:'第三家维修公司', date:';, cost:1807.0, costav:1807.0
factory:'第一家维修公司', date:';, cost:4921.0, costav:4921.0
factory:'第二家维修公司', date:';, cost:1020.0, costav:1020.0
factory:'第三家维修公司', date:';, cost:1637.0, costav:1637.0
factory:'第一家维修公司', date:';, cost:48150.0, costav:48150.0
factory:'第二家维修公司', date:';, cost:7940.0, costav:7940.0}];
②store数据交互
var store = Ext.create('Ext.data.Store', {
fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}],
groupField: 'date',
data: data
这里只需要指定一个groupField就可以了，只需要这一步。
③。grid主体
var grid = Ext.create('Ext.grid.Panel', {
frame: true,
height: 800,
columnLines: true, // 加上表格线
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}'+'月份车辆美容及维修费用',
hideGroupedHeader: false,
enableGroupingMenu: false
ftype: 'summary',
summaryType: 'average',
dock: 'bottom'
renderTo: Ext.getBody(),
columns: [{
text: '维修时间', dataIndex: 'date',width:100,
summaryRenderer: function(value, summaryData, dataIndex) {
return '合计'}
text: '维修费用(元)', dataIndex: 'cost', width:180,
field: { xtype: 'numberfield'},
summaryType: 'sum',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return value + ' 元'},
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' 元'}
text: '维修厂家', dataIndex: 'factory',width:120,
summaryRenderer: function(value, summaryData, dataIndex) {
return '平均值'}
text: '', dataIndex: 'costav', width:180,
field: {xtype: 'numberfield'},
summaryType: 'average',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return ''},//这列最后显示平均值 暂时这样转换显示
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' 元'}
store: store
这里需要注意，1.需要给grid指定高度，如果不指定IE8下数据不显示,应该是个bug吧。
2.分组以及统计的关键
features: [{
id: 'group',
ftype: 'groupingsummary',//分组统计，可以选择不分组的，各类型可以去API查找
groupHeaderTpl: '{name}'+'月份车辆美容及维修费用',//标题而已
hideGroupedHeader: false,
enableGroupingMenu: false
ftype: 'summary',//下方的汇总的
summaryType: 'average',//类型是求平均值，还有sum等，可以去API查找
dock: 'bottom'
就这样设置，就可以简单的实现一个分组报表统计了，有求平均值求和等方法。简单易用火线求助。grid显示分组问题。_牧师吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：60,615贴子：
火线求助。grid显示分组问题。
今天打本， 莫名其妙的发现grid的分组不是按照O键团队分的。是按照角色自动分组的。无论怎么RL都没用。然后发现系统自带的也是按照角色分组， 点了按照小队分组。然后grid还是按照角色， 各种无解。估摸应该grid哪里设置也变成了角色分组， 求解设置在哪里？
看了半天公告，斟酌了半...
本人大学毕业了，没时间...
在现在这个土豪横行的火...
想买个电脑可惜没钱，老...
吧里有玩穿越火线的水友...
穿越火线作为一个经典铁...
9月新版本即将到来，快...
真不知道是什么支持我玩...
本人有CF北京一区7v号，...
你们敢不敢gfugffyccufd...
好奇葩的说……
内&&容:使用签名档&&
保存至快速回贴
为兴趣而生，贴吧更懂你。&或您当前的位置：&>&&>&
&分组表格控件在我们的开发中经常被用到，GroupingGrid分组表格就是在普通表格的基础上，根据某一列的数据显示表格中的数据分组的表格控件。举个例子给大家，比如某些信息用树形显示觉得有点大才小用，树形可以有无限极，但是用了分组表格可以完美的展示信息，看下图是我的项目中用到的一个例子，将所有评分项显示出来，并且动态获取是否有次数，如果有次数将出现可编辑，没有次数就不可编辑，如果需要扣分就出现链接，没有就不出现，这正好结合了我们前几节学的知识，看下面的图：
具体代码：我这里是在其他组件中弹出的这个分组表格控件，所以大家看重点代码即可，当时写这个功能可花费了不少时间，大家好好研究哈~
&&&&actions.push(&&
&&&&&&&&{&&
&&&&&&&&&&&&text:&'评分',&&
&&&&&&&&&&&&iconCls:&'gradebtn',&&
&&&&&&&&&&&&listeners:&{&&
&&&&&&&&&&&&&&&&'click'&:&function()&{&&
&&&&&&&&&&&&&&&&&&&&var&xg&=&Ext.&&
&&&&&&&&&&&&&&&&&&&&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();&&
&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&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;&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{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){&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&str&=&&&a&href='javascript:void(0);&onclick=&+'points()'+&'&&+v+&&/a&&;&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&var&str1&=&&&a&href='javascript:void(0);&onclick=&+'points(true)'+&'&取消&/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&){&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&&&r.set('fenshu',&r.data.itemvalue);&&
&&&&&&&&&&&&&&&&&&&&&&&&r.set('status',!is);&&
&&&&&&&&&&&&&&&&&&&&&&&&mit();&&
&&&&&&&&&&&&&&&&&&&&}&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&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.&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()两个函数，才能实现正常切换。
好了，现在你也来动手尝试下吧。
本文出自，转载请保留此出处！
猜你感兴趣