How to add a common line to the footer in extjs

Question

I want to add a common row to the footer of the grid. I have a common line whose record is available in the store. In the grid, the user selects a descending order, the general row is displayed as the first row. Can someone tell me how to avoid this?

I will explain my complete problem:

For example, I have a grid view such as Target Target1 Target2 obtained 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 compute the Target (2-1) Target% total value in the store and bind the store in the grid. This way only the common column is changed. In the grid, the user selects the descending order, the general row also changes. Can someone tell me how to avoid this?

thanks

Answer 1

You should use the pivot grid function instead of the regular row. Here is a fiddle demonstrating the use with your example and using the special function summaryType, which implements the calculation for your goal% total.

This is a better way than making the final calculation as a record in the store, you will not encounter the problem of sorting and filtering.

Take a look here for a live example. Basically, you need to add this function to the grid, for example:

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

And add the summaryType configuration to the desired columns, for example:

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

And here's what a 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; }