Creating summary rows aggregating the grid's data

1. Create a grid panel with the following configuration and column configuration:
Ext.create('Ext.grid.Panel', {
title: 'Summary Example',
height: 300,
width: 600,
store: invoiceStore,
columns: [{
header: 'Client',
dataIndex: 'Client',
flex: 1
}, {
header: 'Date',
dataIndex: 'Date',
xtype: 'datecolumn',
format: 'd/m/Y'
}, {
header: 'Amount',
dataIndex: 'Amount',
xtype: 'numbercolumn'
}, {
header: 'Status',
dataIndex: 'Status'
}],
style: 'margin: 50px',
renderTo: Ext.getBody()
});

2. In the grid's features collection add summary as ftype. Then add a summaryType
and custom summaryRenderer to the Amount column to sum the total value of
all invoices:
Ext.create('Ext.grid.Panel', {
...
features: [{
ftype: 'summary'
}],
columns: [{
header: 'Client',
dataIndex: 'Client',
flex: 1
}, {
header: 'Date',
dataIndex: 'Date',
xtype: 'datecolumn',
format: 'd/m/Y'
}, {
header: 'Amount',
dataIndex: 'Amount',
xtype: 'numbercolumn',
summaryType: 'sum',
summaryRenderer: function(value, summaryData, field){
return '£' + Ext.Number.toFixed(value, 2);
}
}, {
header: 'Status',
dataIndex: 'Status'
}],
...
});

3. Finally, add a count summary to the Client column and apply a custom
summaryRenderer to display the total number of invoices in this grid:
Ext.create('Ext.grid.Panel', {
...
columns: [{
header: 'Client',
dataIndex: 'Client',
flex: 1,
summaryType: 'count',
summaryRenderer: function(value, summaryData, field){
return Ext.String.format('{0} Invoice{1}', value, value !== 1 ? 's' : '');
}
},
...
]
...
});

4. To customize the style of the summary row, add the following CSS in the HEAD
element of your HTML page: