如何在ExtJS中使用JavaScript实现表格行求和？

现状与需求 #

我用ExtJS开发了一个统计数据表格，已经实现列求和功能，现在需要实现行求和效果。

当前表格：

已实现的列求和代码（summaryRenderer）：

summaryRenderer: function(val, params, data, metaData) { 
    return '<span style=color:#00B2EE;font-weight:bold;text-align: center;>' + val + '</span>';
}

预期的行求和效果：

尝试的代码及问题 #

我编写了一段代码但运行失败，代码如下：

var tutar =0;
var record = this.up('RadyolojiSorgulamaForm').down("#grdHizmetSayilari").getStore().data.items;
if(record.length>0){
    for(var i = 0;i<record.length;i++){
        toplam =tutar+record[i].data.toplam;

运行结果截图：

优化方案 #

根据需求，推荐两种可行的行求和实现方式，同时修复你原有代码的问题：

方案1：列renderer实时计算行内总和 #

如果需要在每行最后一列显示该行多字段的求和结果，直接给合计列配置renderer，渲染时计算当前行指定字段的总和：

{
    text: '行合计',
    dataIndex: 'rowTotal',
    renderer: function(value, metaData, record) {
        // 替换为你实际需要求和的字段名
        var fieldA = record.get('fieldA') || 0;
        var fieldB = record.get('fieldB') || 0;
        var fieldC = record.get('fieldC') || 0;
        
        var total = fieldA + fieldB + fieldC;
        // 保持和列求和一致的样式
        return '<span style="color:#00B2EE;font-weight:bold;text-align:center;">' + total + '</span>';
    }
}

方案2：Store加载后批量计算行总和 #

如果需要将行合计值存入Record（方便后续操作），可以在Store的load事件中批量处理：

Ext.getCmp('grdHizmetSayilari').getStore().on('load', function(store) {
    store.each(function(record) {
        // 计算当前行指定字段的总和
        var fieldA = record.get('fieldA') || 0;
        var fieldB = record.get('fieldB') || 0;
        var rowTotal = fieldA + fieldB;
        
        // 将合计值存入record的指定字段
        record.set('rowTotal', rowTotal);
    });
});

原有代码的修复 #

你原有代码存在变量未声明、逻辑错误、代码未闭合的问题，修复后（如果是统计所有行toplam字段的总和）：

var tutar = 0;
var store = this.up('RadyolojiSorgulamaForm').down("#grdHizmetSayilari").getStore();
store.each(function(record) {
    tutar += record.get('toplam') || 0;
});
// 后续可将tutar赋值给合计行或指定元素
console.log('所有行toplam字段总和：', tutar);

内容的提问来源于stack exchange，提问作者user20263794