4

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

Illidanek
  • 996
  • 1
  • 18
  • 32
mohan
  • 13,035
  • 29
  • 108
  • 178

1 Answers1

9

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;
}
Amit Aviv
  • 1,816
  • 11
  • 10
  • thanks for reply all the values are coming from store am assign the field to column{text: 'name', dataIndex: 'name',flex: 1 }, like that am doing for total row.In total row i have different calculation for each column. – mohan May 15 '13 at 06:52
  • The summary feature allows different calculation for each column according to the summaryType you use, and more complicated calculation if you need. If you post a jsfiddle, I'll be able to show you – Amit Aviv May 15 '13 at 08:39
  • did you understand my problem – mohan May 15 '13 at 09:22
  • Yes, I still think the best way to solve it is with the summary feature, I just don't have the time right now to show you an example of how to write a custom summaryType, hope I'll get to it later today. – Amit Aviv May 15 '13 at 09:44
  • thanks for your help amit.It is very useful from still one more doubt they are setting data statically .I am setting the value for target,target1,target2 populate the grid using columns property {text: 'Target', dataIndex: 'target',flex: 1 }, vale are coming from column config – mohan May 15 '13 at 11:34
  • it is giving summery row below, i need it on top , then show its data – Poonam Bhatt Feb 24 '14 at 12:10
  • In case you have custom renderer and your summaryType isn't compatible with it, don't forget to define summaryRenderer. If you don't, column renderer will be used on summary which may give unexpected results. – remo Oct 28 '14 at 17:43