How to do Ext.grid.feature.GroupingSummary by multiple fields?

[renganathan]

Ext.define('TestResult', {
    extend: 'Ext.data.Model',
    fields: ['student', 'subject', {
        name: 'mark',
        type: 'int'
    }]
});

Ext.create('Ext.grid.Panel', {
    width: 200,
    height: 240,
    renderTo: document.body,
    features: [{
        groupHeaderTpl: 'Subject: {name}',
        ftype: 'groupingsummary'
    }],
    store: {
        model: 'TestResult',
        groupField: 'subject',
        data: [{
            student: 'Student 1',
            subject: 'Math',
            mark: 84
        },{
            student: 'Student 1',
            subject: 'Science',
            mark: 72
        },{
            student: 'Student 2',
            subject: 'Math',
            mark: 96
        },{
            student: 'Student 2',
            subject: 'Science',
            mark: 68
        }]
    },
    columns: [{
        dataIndex: 'student',
        text: 'Name',
        summaryType: 'count',
        summaryRenderer: function(value){
            return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
        }
    }, {
        dataIndex: 'mark',
        text: 'Mark',
        summaryType: 'average'
    }]
});

In this above example i want to group by multiple fields .like this

groupField: ['subject', 'student']


Is this possible ? can u guys helped me how to achieve that ?

[skirtle]

Would you want a single level of grouping based on a pair of fields or would you want multi-level grouping?

For the first option you'd need to generate an extra field on your model that combines the two fields in question. Easiest way to do that is probably using a convert function to concatenate two other field values. This gets complicated if you allow users to change the grouping as they need a way to access this field and it isn't clear where this would go in the UI.

Alternatively, if you want multi-level grouping you're going to struggle. See here:

http://www.sencha.com/forum/showthread.php?150858

[delusion]

I did single level grouping on multiple columns by setting the groupField to a single column (ie surname) and then set the getGroupstring to a function that returns the surname+givenname+role

so instead of just grouping by the last name it groups by individual people and their role in different events.



var gridStore = Ext.create('Ext.data.Store', {
id: 'gridStore',
model: 'mdlGrid',
groupField: 'surname',
getGroupString: function(instance) {
var group = this.groupers.first();
if (group) {
if (group.property == 'surname') {
return instance.get(group.property)+ ', ' + instance.get('g1') + ' (' + instance.get('role') + ') ';
}
return instance.get(group.property);
}
return '';
}
});

[zlevardy]

hi,

surname kind of grouping works fine. Now I am facing to an issue to display it, or similar in grouping header.
In my case grouping members by projects, as "team"
return instance.get(group.property)+ ', ' + instance.get('member').fullName + '(' + instance.get('project').description + ')';

"team" in header:
groupHeaderTpl: ' Team: {team} ({rows.length})',

the problem for me the nested objects and to read value in the header template. Somehow member.fullName does not work.

thx,
Zol