CODEWITHSUNDEEP
javascriptextjsgridextjs5
mayes
mayes

Reputation: 5

extJs 5 - grid multiple level grouping

I'm looking for a way to group my data by months and the months by years... two levels of grouping. For now, I can group my data only by years...

Can anyone help me please ?

My model :

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 
// 'name', 
// 'email', 
'phone' ]});

My data :

var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
    { year: '2015', month : 'march', phone: '555-111-1224' },
    { year: '2015', month : 'april', phone: '555-222-1234' },
    { year: '2014', month : 'march', phone: '555-222-1244' },
    { year: '2014', month : 'april', phone: '555-222-1254' }
],
groupField: 'year'});

The grid :

Ext.application({

name   : 'MyApp',

launch : function() {

    Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        features: [{ ftype: 'grouping' }],
        store: userStore,
        width: 250,
        height: 300,
        title: 'Application Users',
        columns: [
            {
                text: 'Phone Number',
                flex: 1,
                dataIndex: 'phone',
                sortable: false,
                hideable: false
            }
        ]
    });
}});

Thx in advance ! Mayes

Upvotes: 0

Views: 7486

Answers (1)

Greg McGrath
Greg McGrath

Reputation: 537

On the store, try using the grouper config instead of the groupField. It will give you more flexibility in how you are grouping your data.

Here's an example for your scenario:

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { year: '2015', month : 'march', phone: '555-111-1224' },
        { year: '2015', month : 'april', phone: '555-222-1234' },
        { year: '2014', month : 'march', phone: '555-222-1244' },
        { year: '2014', month : 'april', phone: '555-222-1254' }
    ],    
    grouper: {
        groupFn: function(item) {
            return 'Month: ' + item.get('month') + ', Year: ' + item.get('year');
        }
    }
);

Please see https://fiddle.sencha.com/#fiddle/jh9 to see it in action.

Upvotes: 1

Related Questions