PDA

View Full Version : How to do Grouping by Category and Summary Row at last.



Prasad_Guduri
7 Feb 2014, 10:09 AM
Hi All,

I want to design the grid as following.

Note: I want to group the records by category and display the summary of all groups at last.
47855


My Grid Code:

Ext.define('view.EmployeePaySummaryGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.summaryGrid',

initComponent: function () {
Ext.apply(this, this._createComponentConfig());
this.callParent();
},

_createComponentConfig: function ()
{


var cm = this._createColumnModel();
var paySummaryStore = Ext.getStore('MyEmployeePaySummary');

return {
itemId: 'employeepaysummaryGrid',
columns: cm,
store:paySummaryStore,
loadMask: true,
border: false,
forceFit: true,
disableSelection: true,
features: [{
id: 'group',
ftype: 'groupingsummary', // tried summary as well
showSummaryRow: true,
groupHeaderTpl: '{name}', // here name is groupFiled name from store
enableGroupingMenu: true
}]
};
},

_createColumnModel: function () {
return [
{
dataIndex: "GroupCode",
type: "string",
hidden: true
},
{
dataIndex: "CategoryName",
type: "string",
header: 'category',
align: 'left',
width: 110,
summaryRenderer: this._categorySummaryRenderer
},
{
dataIndex: "Hours",
header: 'Hours',
align: 'right',
width: 100,
summaryType: 'sum'

},
{
dataIndex: "OverlapHours",
header:'Overlap Hours',
align: 'right',
width: 100,
hidden: true,
hideable: false
},
{
dataIndex: "Amount",
header: 'Amount',
id: "Amount",
align: 'right',
hidden: false,
hideable: false,
width: 100,
summaryType: 'sum'
},
{
dataIndex: "JobName",
header: 'Job Name'
align: "center",
hidden: true,
hideable: false,
width: 100
}
];
}
});

My Store:

Ext.define('store.MyEmployeePaySummary', {
extend: 'Ext.Data.Store',
model: 'model.MyEmployeePaySummary',
autoLoad: false,
storeId: 'MyEmployeePaySummary',

load: function (params) {
this.callParent([{
params: Ext.JSON.encode(params),
scope: this
}]);
},
groupField: 'CategoryName' // its from Model Filed Name
});

But the above code showing the summary line after each group. Please help me to resolve it.



Thanks & Regards,
Prasad

Zinnia
10 Feb 2014, 2:05 AM
Check this example

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.grid.feature.GroupingSummary

Prasad_Guduri
10 Feb 2014, 4:25 AM
The above example is also displaying as how i'm displaying now.

I want the SummaryRow only once i.e at last row for all grouped data. I don't want to see Summary row for each group.

Thanks,
Prasad