How can I override the total sum of the EXTJS summary?

Question

I am using EXTJS 4.2.1 and my application has a grid including paging, the grouping summary and the summary feature. I want to override the sum of the summary feature, because it should display the grand total sum of the whole data set and not only for the current displayed page. Is that possible to override the summary feature to do so?

Thanky you very much for every advice in advance. :-)

Answer 1

Use summaryRenderer in column configuration. It is an undocummented feature of ExtJS allowing you to show custom data in your summary row.

You will have to summarize the data server-side and send them to client where you will access it in the summaryRenderer.

Like so:

columns: {
    items: [
        {
            text: "Column A",
            dataIndex: "field_A",
            summaryRenderer: function( value, summaryData, dataIndex ) {
                var grid = this;

                // Get the value here and return it
                var result = functionToGetValue( grid );

                return result;
            }
        },
        // ...
    }
]

The functionToGetValue is the place where you pass the summarization value you sent to your client from server.

How you do that depens on your code. You have access to store via grid.getStore().

It is possible to add the summary data to each record and then simply use store.getAt(0).get( 'summaryValue' ), it is kind of wasteful, but it is simple and it works.