Ext js summaryRenderer function not calling - model-view-controller

Question

This is my view
Ext.define('view.OrdersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.ordersgrid',
store: 'TicketOrders',
features:[
{
ftype: 'groupingsummary',
groupHeaderTpl: [
'{[values.rows[0].data.EventName]} — <small class="muted">{[values.rows[0].data.EventDate]}</small>',
],
//hideGroupedHeader: true,
//collapsible: false,
remoteRoot: 'record',
//showSummaryRow: true,
}
],
initComponent: function () {
var me = this;
me.on('edit', function (editor, e) {
me.getSelectionModel().select(e.record);
me.fireEvent('onEdit', e.record);
});
me.selModel.on('select', function (t, record, index, eOpts) {
me.fireEvent('onRecordSelected', record);
});
me.selModel.on('deselect', function (t, record, index, eOpts) {
me.fireEvent('onRecordSelected', record);
});
me.columns =
[
{
id: 'order',
text: "Order Id",
sortable: true,
dataIndex: 'TOId',
hidden: true
},
{
text: "Order Number",
flex: 1.5,
sortable: true,
dataIndex: 'OrderNumber',
renderer: function (value, metadata, record) {
if (record.get('OrderStatus') == 3) { // error orders
return value + " <img src='images/icons/icon_question_mark.gif' title='" + record.get('Description') + "'/>";
}
else {
return value;
}
}
},
{
text: "Event",
flex: 3,
sortable: true,
dataIndex: 'EventName',
hidden: true,
//summaryType: 'sum',
renderer: function (value, metadata, record) {
return value + " ( " + record.get('TicketCount') + " )";
}
},
{
text: "Price",
flex: 1,
sortable: true,
dataIndex: 'TotalCharges',
//summaryType: 'sum',
//renderer: function (value, summaryData, dataIndex) {
// debugger;
// return parseInt(value);
// }
summaryRenderer: function (value, metadata, record) {
debugger;
return Ext.String.format(
"Total: {0}",
Ext.Number.toFixed(value)
);
}
}
];
this.callParent(arguments);
}, // end init function
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
})
], //end plugins
}
);
This is my model
Ext.define('model.TicketOrder', {
extend: 'Ext.data.Model',
fields: [
'TOId',
'OrderNumber',
'EventName',
'TicketCount',
{
name: 'TotalCharges',
type: 'int'
}
],
idProperty: 'TOId',
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
disableCaching: true,
url: 'WebService.asmx/GetTicketOrdersByUserId?userId=' + Utilities.UserId,
reader: {
root: 'orders',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
}
});
This is my store
Ext.define('store.TicketOrders', {
extend: 'Ext.data.Store',
model: 'model.TicketOrder',
autoLoad: false,
remoteSort: false,
pageSize: 50,
groupField: 'EventOriginalId'
});
I am using MVC architecture, I have put a debugger in summaryRenderer in view but it is not executing and not showing any summary row, need help please. Also tell me what the remoteRoot should be set..enter code here

Answer 1

Un-comment out 'showSummaryRow: true" you will need this. Then for each column you define that you want a summary on you will need to define the summaryRenderer: function() {...} and SummaryType: 'sum'. EXTJS can be a real pain, especially when you want to do something custom. Watch out for extra commas (looks like you've got a couple in the features portion). Try to keep it as simple as possible. Best of luck!
features:[
{
ftype: 'groupingsummary',
groupHeaderTpl: [
'{[values.rows[0].data.EventName]} — <small class="muted">{[values.rows[0].data.EventDate]}</small>',
],
//hideGroupedHeader: true,
//collapsible: false,
remoteRoot: 'record',
showSummaryRow: true
}
],