View Full Version : How to update Grid Summary after updating column values

17 Jan 2012, 11:39 AM
Hi all,

I have a grid with summary feature and rowediting plugin enabled. Here is what my grid looks like:

When the grid is rendered, the summary column display its values correctly. But my users will make use of the row editing feature to edit values like qty or price. I modify the total value through edit event:

'edit' : function(editor, e) {
console.log('Recalculate the data');
var rec = e.record;
rec.set('total',rec.get('price') * rec.get('qty'));

But there is no change in Summary Row of the grid. How do I update the summary row when the values change? I just can figure out how to update it.. or did I miss something simple?!

Thanks in advance,

17 Jan 2012, 12:52 PM
Just tested in 4.1.0 beta 1 and it is working.

17 Jan 2012, 11:55 PM
@mitchellsimoens Thanks for your reply. But I am running it on 4.1 beta and not able to see any update on summary row happening!

Here is my View & Controller:


features: [{
ftype: 'summary'
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
errorSummary: false
columns: [{
text: 'Type',
dataIndex: 'type',
renderer: function(value) {
// code..
editor: {
xtype: 'combobox',
store: 'PTypeStore',
queryMode: 'local',
displayField: 'type',
valueField: 'value'
text: 'Description',
dataIndex: 'description',
flex: 2,
editor: {
xtype: 'triggerfield',
onTriggerClick: function() {
// code..
text: 'Qty',
dataIndex: 'qty',
editor: 'numberfield'
text: 'Price',
dataIndex: 'price',
editor: 'numberfield',
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return "Total";
text: 'Sub Total',
dataIndex: 'total',
summaryType: 'sum',
editor: 'numberfield'

And controller:

init: function() {
console.log('init method for Invoice controller');
'invlist' : {
'edit' : function(editor, e) {
console.log('Recalculate the data...');
var rec = e.record;
var newTotal = rec.get('price') * rec.get('qty');
var rec = e.record;
'canceledit' : function(editor, e) {
console.log('Canceled the edit');
'invlist button[action="addentry"]' : {
'click': function(but,e) {
panel = but.up('invlist');
plugin = panel.getPlugin();

var r = Ext.create('Exp.model.OrderItem', {
type: 0,
description: '',
qty: 0,
price: 0,
total: 0

store = panel.getStore();
store.insert(store.count(), r);
plugin.startEdit(store.count()-1, 0);
'invlist button[action=removeentry]' : {
'click': function(but,e) {
panel = but.up('invlist');
// remove the entry

Am I missing some configuration?

18 Jan 2012, 4:16 AM
I took the grouping summary example that comes with the download, changed it to regular summary feature and changed it from CellEditing to RowEditing and it worked.

18 Jan 2012, 4:29 AM
Thanks for the info! I will play with the example and see if I can get it to work :)

8 May 2012, 2:00 PM
any way to call a refresh on the summary?

9 May 2012, 8:13 AM
I found an interesting tidbit on further investigation.
I took out my rowsummary feature, and tried to substitute it with a dataview, and a rendering template.
I made my template call an each function on the records in the store, and update a total value.
it was working the same way as the summary feature plugin...my total was only updating after adding another record, not after my roweditor did an update.

I added a listener to the store, using datachange:
and what I found, was that the store only triggered a datachange after doing a store.insert(index,model), and not after my roweditor update function triggers a rec.commit();

rec.commit(); should trigger a store datachange, shouldn't it?
looks like a bug to me.

9 May 2012, 11:08 AM
I figured out a workaround for my specific issue, not sure if it will help you too.
I noticed that by inserting another record, it triggers the totals to recalculate.

Another problem I was having, was in my code, I was adding a new record, before my previous roweditor rec.commit was taking place. I was able to move my new record insert to a listener on the store, for the update 'commit' operation.

I still think there is a bug here, but it may be on store events, and not necessarily the summary plugin, etc...

a summaryUpdate function would help.

2 Aug 2012, 10:57 PM
To refresh summary after record.commit(), just call grid.getView().refresh() method

12 Feb 2013, 9:43 AM
try adding this to your controller:

edit: function(editor, e) {

it worked for me.

20 Aug 2013, 9:06 PM
view().refresh() does not work on 4.2.1.

Totals are not updated after you remove a row from grid.

31 Mar 2016, 12:42 AM
Thanks, that made the trick! (ExtJS 4.2.5)