extjs4.1 - How to add total row in grid footer in extjs -

i want add total row in grid footer. have total row record available in store. in grid user selects descending order, total row appears first row. can tell me how avoid this?

i explain full problem:

eg have grid view target target1 target2 getting 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 calculate total%    

i calculating value target(2-1) target% total value in store , bind store in grid. total column changes. in grid user selects descending order, total row changes. can tell me how avoid this?

thanks

you should use grid summary feature, instead of regular row. here fiddle demonstrates usage example, , custom summarytype function implements calculation target% total.

this better method summary calculation record in store, not trouble sorting , filtering.

have here documantation , live example. basically, need add feature grid like:

ext.create('ext.grid.panel', {     ...     features: [{         ftype: 'summary'     }],     ... 

and add summarytype config columns need, like:

columns: [{     dataindex: 'name',     text: 'name',     summarytype: 'sum', ... 

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