Is it possible to show more than one summary line in gridpanel extjs?

Question

Below is my code showing the grid panel with the total cost. I want to show another summary row with an average value. So any help?

Ext.require(['Ext.data.*', 'Ext.grid.*']); Ext.onReady(function() { Ext.define('NewEstimate', { extend: 'Ext.data.Model', fields: ['description', 'cost'], validations: [{ type: 'length', field: 'description', min: 3 }, { type: 'int', field: 'cost', min: 1 }] }); var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); var store = Ext.create('Ext.data.Store', { autoLoad: true, autoSync: false, model: 'NewEstimate', proxy: { type: 'rest', url: 'app.php/users', reader: { type: 'json', root: 'data' }, writer: { type: 'json' } }, listeners: { write: function(store, operation){ var record = operation.records[0], name = Ext.String.capitalize(operation.action), verb; if (name == 'Destroy') { verb = 'Destroyed'; } else { verb = name + 'd'; alert(name); } Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId())); } } }); var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1, listeners: { edit: function(){ grid.getView().refresh(); } } }); var data = [ {projectId: 100, taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', cost: 150}, {projectId: 100, taskId: 113, description: 'Implement AnchorLayout', cost: 150}, {projectId: 100, taskId: 114, description: 'Add support for multiple types of anchors', cost: 150}, {projectId: 100, taskId: 115, description: 'Testing and debugging', cost: 0} ]; var gridPanel = new Ext.create('Ext.grid.Panel', { width: 600, height: Ext.getBody().getViewSize().height * 0.3, renderTo: document.body, plugins: [rowEditing], features: [{ ftype: 'summary' } ], store: store, columns: [{ dataIndex: 'description', flex: 1, text: 'Description', summaryType: 'count', field: { xtype: 'textfield', allowBlank: false }, summaryRenderer: function(value){ return Ext.util.Format.leftPad('Estimate Total (EUR)'); } }, { dataIndex: 'cost', width: 75, text: 'Line Total', field: { xtype: 'numberfield', allowBlank: false }, summaryType: function(records){ var i = 0, length = records.length, total = 0, record; for (; i < length; ++i) { record = records[i]; total = total + Number(record.get('cost')); } return total; } }], dockedItems: [ { xtype: 'toolbar', items: [{ text: 'Add', iconCls: 'icon-add', handler: function(){ // empty record store.insert(0, new NewEstimate()); rowEditing.startEdit(0, 0); } } , '-', { text: 'Delete', iconCls: 'icon-delete', handler: function(){ var selection = gridPanel.getView().getSelectionModel().getSelection()[0]; if (selection) { store.remove(selection); } } }] }] }); }); 

Thanks in advance

Answer 1

I had a similar need. Given enough time, I would most likely expand the Summary feature to support multiple aggregates. However, I did not have time, so I did some dirty work.

Instead of trying to get two strings, I just used summaryType as a function and returned the value as a string with the BR tag. This is definitely clumsy, but it works for what I need.

Something like:

 columns: [ { header:'Quantity', dataIndex: 'Quantity', summaryType"="function( records ) { sum = 0; for( rec in records ) { var record = records[ rec ]; sum += record.data[ '#guide#_Quantity' ]; } avg= Math.floor( sum/records.length ); return '<strong>'+ sum + ' Books<br />' + avg + ' Books</strong>'; } } ]