How to add total row in grid footer in extjs

Question

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:

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   

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?

Thanks

Answer 1

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.

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'
    }],
    ...

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

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

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