Basically, as described in ColumnFooter example, you can specify the expression using the totals calculated within the grid in ColumnSummary.expression property, to display the total value of the column cells in the column footer. However, if the total values calculated within the grid are not enough, you can specify JavaScript callback function which calculates the total in callback or summaryCallback property.
Interest Rate, Original Amount columns of the grid below specify callback function in callback property. scope parameter contains the total values calculated within the grid.
"footer": {
"callback": function (scope) {
return scope.avg();
},
...
}
Cancelled Amount column specifies callback function in summaryCallback property. JavaScript function specified in summaryCallback should autonomously calculate and return the value to be displayed in the total cell.
"footer": {
"summaryCallback": function (grid, column) {
var fld = column.dataIndex();
var v = 0;
for (var i = grid.rowCount(); i--;) {
v += grid.getValueAt(i, fld);
}
return v;
},
...
}