如何在extjs的网格页脚中添加总行 [英] How to add total row in grid footer in extjs

问题描述

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

I want to add total row in grid footer. I have total row that record is available in store. In grid the user selects descending order, total row appears as the first row. Can anybody tell me how to avoid this?

我将解释我的全部问题:

I will explain my full problem:

例如我有网格视图，如 Target Target1 Target2 are getting from webservice

eg I have grid view like Target Target1 Target2 are getting from webservice

 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% total value in store 并将 store 绑定到网格中.所以只有总列也会发生变化.在网格中用户选择降序，总行也会改变.谁能告诉我如何避免这种情况?

I am calculating the value Target(2-1) Target% total value in store and bind the store in grid. So only the total column also changes. In grid the user selects descending order, total row also changes. Can anybody tell me how to avoid this?

谢谢

推荐答案

您应该使用网格汇总功能，而不是常规行.Here 是一个用您的示例演示用法的小提琴，以及实现目标％计算的自定义 summaryType 函数总计.

You should use the grid summary feature, instead of a regular row. Here is a fiddle that demonstrates the usage with your example, and with custom summaryType function that implements the calculation for your Target% total.

这种方法比在store中做一个记录做汇总计算更好，不会在排序和过滤时遇到麻烦.

This is a better method than to do the summary calculation as a record in the store, you will not get into trouble with sorting and filtering.

查看这里的文档和直播例子.基本上，您需要将该功能添加到网格中，例如:

Have a look here for documantation and live example. Basically, you need to add the feature to the grid like:

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

并在您需要的列中添加一个 summaryType 配置，例如:

And add a summaryType config to the columns you need, like:

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

这就是自定义 summaryType 的样子:

And this is how the custom summaryType looks like:

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;
} 

这篇关于如何在extjs的网格页脚中添加总行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！