Ext.ux.grid.feature.RemoteSummary

[KajaSheen]

Add the possibility to have a remote summary supplied with a server response, when you have a grid with lots of rows (and paging), but want to display a summary over all rows, i.e. account balance. Basically merged the functionality provided by the GroupingSummary into the regular Summary.

Ext.define('Ext.ux.grid.feature.RemoteSummary', {
    
    /* Begin Definitions */
    
    extend: 'Ext.grid.feature.Summary',
    
    alias: 'feature.ux.remotesummary',
    
    /* End Definitions */
        
    /**
     * Generates all of the summary data to be used when processing the template
     * @private
     * @return {Object} The summary data
     */
    generateSummaryData: function(){
        var me = this,
            data = {},
            remoteData = {},
            store = me.view.store,
            reader = store.proxy.reader,
            columns = me.view.headerCt.getColumnsForTpl(),
            root,
            summaryRow,
            remote,
            i = 0,
            length = columns.length,
            fieldData,
            key,
            comp;
            
        /**
         * @cfg {String} [remoteRoot=undefined]
         * The name of the property which contains the Array of summary objects.
         * It allows to use server-side calculated summaries.
         */
        if (me.remoteRoot && reader.rawData) {
            // reset reader root and rebuild extractors to extract summaries data
            root = reader.root;
            reader.root = me.remoteRoot;
            reader.buildExtractors(true);
            summaryRow = reader.getRoot(reader.rawData);

            // Ensure the Reader has a data conversion function to convert a raw data row into a Record data hash
            if (!reader.convertRecordData) {
                reader.buildExtractors();
            }

            // Convert a raw data row into a Record's hash object using the Reader
            reader.convertRecordData(remoteData, summaryRow);

            // restore initial reader configuration
            reader.root = root;
            reader.buildExtractors(true);
        }        
        
        for (i = 0, length = columns.length; i < length; ++i) {
            comp = Ext.getCmp(columns[i].id);
            data[comp.id] = me.getSummary(store, comp.summaryType, comp.dataIndex, false);
            
            remote = remoteData[comp.dataIndex];
            if (remote !== undefined) {
                data[comp.id] = remote;
            }                               
        }
        return data;
    }
}); 

Example:

// in your grid
features: [{
  id: 'group',
  ftype: 'ux.remotesummary',
  hideGroupedHeader: true,
  remoteRoot: 'summaryData', 
  enableGroupingMenu: false
}] 

In the Response (in this case JSON)

{
  success: true,
  rows: [
    {id: 1, description: 'foo', value: 100},
    {id: 2, description: 'bar', value: 150}
  ],
  summaryData: {value: 500}
} 

would display the value of 500 collected from the server.

Hope this is helpful for someone else

[scottmartin]

Thank you for sharing your code ..

Regards,
Scott.

[ajaxvador]

+1

[Christiand]

+1

with the push to using buffered render grid/store since 4.0 there is no reason that this is not supported by the framework.

[Christiand]

If I configure my buffered store with 100 records per page and the result from the server query return less then 100 records, then the summary is always displayed perfectly when I scroll to the bottom. If there are more then 100 records (and the store fetches more then once) then the summary doesn't appear as you scroll to the bottom. If I inspect the DOM with firebug, I see the HTML is generated properly and it highlights "under" the last visible row.

gsbug.jpg

So the problem appears to be the scroller that just stop one row before the summary (?) Anyone can help me fix this problem ?