首页 > 代码库 > Extjs GridPanel在有分页的情况下服务端统计合计实现方式

Extjs GridPanel在有分页的情况下服务端统计合计实现方式

1、应用场景
在有分页的时候计算合计就不能采用Extjs gridpanel 提供的ftype: summary方式解决,否则只计算当前页的合计(因为数据只提取了当前页);
2、解决办法
重写Ext.grid.feature.Summary中的generateSummaryData函数
//方法一,临时重写
Ext.grid.feature.Summary.override({
   generateSummaryData:function(){
       return this.view.store.getProxy().reader.rawData[this.remoteRoot];
   }
});
//方法二,定义类重写,以便其他模块引用(requires)
Ext.define(‘Ux.override.grid.feature.Summary‘,{
   override:‘Ext.grid.feature.Summary‘,
   generateSummaryData:function(){
       return this.view.store.getProxy().reader.rawData[this.remoteRoot];
   }
});
3、Grid配置
features: [{
ftype: ‘summary‘,
remoteRoot: ‘summary‘//后台提供数据的路径
}]
4、column配置
{
   text: "管线名称", dataIndex: "GXMC",width:120,
       summaryRenderer: function (value, summaryData, dataIndex) {
           return ‘(‘ + value + ‘ 项)合计:‘;
       }
},
{ text: "预算(万元)", dataIndex: "YXJE", width:120,summaryRenderer: rendernum(value) {
if (value) {
return Ext.util.Format.number(value, ‘0.####‘);
}
return ‘‘;
}
}
5、后台提供数据格式,在原来数据格式上添加,路径可自定,与此相配合 remoteRoot: ‘summary‘//后台提供数据的路径
"summary": {
    "YXJE": 80114.5575,
    "GXMC": 1081
  }
 
后感:
Ext.grid.feature.Summary 这个类在API中并没有remoteRoot配置项,但是通过查看EXTJS源码,发现已经实现了此配置项,但没有实现generateSummaryData方法,
其实EXTJS把这个服务端统计的功能已经几乎实现完了,但就差最后一小步了,所以大家在学习EXTJS的时候还是需要去了解源码实现的;
 备注:在Extjs5.1下测试通过,谢谢。

Extjs GridPanel在有分页的情况下服务端统计合计实现方式