如何在extjs的网格页脚中添加总行

Posted 2023-02-26

【中文标题】如何在extjs的网格页脚中添加总行

【英文标题】：How to add total row in grid footer in extjs

【发布时间】：2013-05-14 12:52:56

【问题描述】：

我想在网格页脚中添加总行。我有该记录在商店中可用的总行。在网格中，用户选择降序排列，总行显示为第一行。谁能告诉我如何避免这种情况？

我将解释我的全部问题：

例如，我有网格视图，如 Target Target1 Target2 正在从 web 服务获取

 Month Target  Target1  Target2   Target(2-1)  Target%
  jan    500     1000    1001        1           0.99
  feb    600     2000    2001        1           0.99

  **total  1100     3000    3002        2          2*3002/100** need to calculate total% like this   

我正在计算存储中的值 Target(2-1) Target% 总值并将存储绑定到网格中。所以只有总列也会改变。在网格中，用户选择降序，总行也发生变化。谁能告诉我如何避免这种情况？

谢谢

【参考方案1】：

您应该使用网格摘要功能，而不是常规行。 Here 是一个小提琴，它演示了您的示例的用法，以及自定义的 summaryType 函数，该函数实现了 Target% 总数的计算。

这比在商店里做记录做汇总计算更好，你不会在排序和过滤上遇到麻烦。

查看here 以获取文档和实时示例。基本上，您需要将该功能添加到网格中，例如：

Ext.create('Ext.grid.Panel', 
    ...
    features: [
        ftype: 'summary'
    ],
    ...

并将 summaryType 配置添加到您需要的列中，例如：

columns: [
    dataIndex: 'name',
    text: 'Name',
    summaryType: 'sum',
...

这就是自定义 summaryType 的样子：

dataIndex: 'targetPercent',
text: 'Target%',
summaryType: function(records)
    var totals = records.reduce(function(sums, record)
        return [sums[0] + record.data.target2, 
                sums[1] + record.data.targetDiff];
    , [0,0]);

    return (totals[0] * totals[1]) / 100;
 

【讨论】：

感谢您的回复，所有值都来自商店，将字段分配给列text：'name'，dataIndex：'name'，flex：1，就像我对总行所做的那样。在总行中，我对每一列都有不同的计算。

汇总功能允许根据您使用的summaryType对每一列进行不同的计算，如果您需要更复杂的计算。如果你发布一个 jsfiddle，我可以给你看

你明白我的问题了吗

是的，我仍然认为解决它的最好方法是使用摘要功能，我只是现在没有时间向您展示如何编写自定义摘要类型的示例，希望我今天晚些时候再谈。

感谢您的帮助，这是非常有用的，因为还有一个疑问，他们正在静态设置数据。我正在设置目标的值，目标1，目标2使用列属性text：'填充网格Target', dataIndex: 'target',flex: 1 , vale 来自列配置