How to add total row in grid footer in extjs - 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;
}