How to calculate totals in a grid with the summary function - extjs

Question

I have a grid with two summary positions. I have a summary at the end of the grid. This is working great. But what I want is to calculate the total price per row. I have 4 columns called 'Aantal, Stukprijs,korting and Totaal'. What I need is that in the 'Totaal' column this sum: (Aantal X Stukprijs) - %korting(means discount).
This is the code for that grid:
xtype: 'gridpanel',
id: 'materiaalGrid',
autoScroll: true,
forceFit: true,
store: 'MyArrayStore8',
columns: [
{
xtype: 'rownumberer'
},
{
xtype: 'gridcolumn',
dataIndex: 'naam',
text: 'Naam',
editor: {
xtype: 'combobox'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'type',
text: 'Type'
},
{
xtype: 'numbercolumn',
summaryType: 'sum',
dataIndex: 'gewicht',
text: 'Gewicht'
},
{
xtype: 'numbercolumn',
summaryType: 'sum',
dataIndex: 'aantal',
text: 'Aantal',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'stuks',
text: 'Stukprijs'
},
{
xtype: 'numbercolumn',
dataIndex: 'korting',
text: 'Korting',
editor: {
xtype: 'numberfield',
maxValue: 100
}
},
{
xtype: 'numbercolumn',
summaryType: 'sum',
dataIndex: 'stuks',
text: 'Totaal'
},
{
xtype: 'booleancolumn',
dataIndex: 'verkoop',
text: 'Verkoop'
},
{
xtype: 'actioncolumn',
maxWidth: 50,
minWidth: 50,
width: 50,
defaultWidth: 50,
emptyCellText: 'Delete',
menuDisabled: true,
items: [
{
handler: function(view, rowIndex, colIndex, item, e, record, row) {
var selection = me.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
},
altText: 'Delete'
}
]
}
],
viewConfig: {
enableTextSelection: false
},
features: [
{
ftype: 'summary'
}
],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
})
],
I can only get the sum of aantal and gewicht in the bottom row.

Answer 1

To solve this specific scenario you can try doing this:
For the result of "Aantal X Stukprijs" AKA Quantity X Unit price (thanks God Google translator exists!) you can create a calculated field implementing the convert function on the field declaration, as follows:
{
name: 'total',
type: 'number',
convert: function(value, record) {
if(!value) {
// Only calculate the value if no value set since the
// Calculated total column will fill this field with a real
// value we don't want to mess
value = record.get('price') * record.get('units');
}
return value;
}
}
This will still leave inconsistencies when changing the record value using the inline editor you will need to add an extra handler for that like this:
grid.on('edit', function(editor, e) {
// commit the changes right after editing finished
e.record.set('total'); // force total re-calculation
e.record.commit();
});
You con see a complete example here, hope it helps.