ExtJS 4.2.3 Grouping Bug

Question

I am using the store.group() to provide option to the user to group the grid by various fields. Using extjs4.2.3 now after having faced many bugs in 4.2.1, store.group() does not seem to be working at all. How to replicate: Press the "Group" button, which should group the grid. Only sorts the data. Choose "Group by this field" from the column menu and the grouping starts to work fine.

Similarly store.clearGrouping() behaves the same way. Here is sample code:

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

Ext.create('Ext.grid.Panel', {
    width: 200,
    height: 240,
    itemId: 'gridtest',
    renderTo: document.body,
    features: [{
        groupHeaderTpl: 'Subject: {name}',
        ftype: 'groupingsummary'
    }],
    store: {
        model: 'TestResult',
        itemId: 'testStore',
        //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'
    }],
    tbar: [{
        xtype: 'button',
        text: 'Group',
        handler: function(button, e) {
            var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
            store.group('subject');
        }
    }, {
        xtype: 'button',
        text: 'clear',
        handler: function(button, e) {
            var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
            store.clearGrouping();
        }
    }]

});

Running the code in ExtJS 4.2.1 works fine on the sencha fiddle, but not on 4.2.3 I tested using the code preview option on http://docs.sencha.com/extjs/4.2.3/.

Chetan Chetan · Accepted Answer · 2015-01-13T09:58:17

Above code is working fine in extjs-4.2.3.

Open http://docs.sencha.com/extjs/4.2.3/ and in Developer tools Console tab execute following code:- Group on 'Group' button is working fine.

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

var grpGrid = Ext.create('Ext.grid.Panel', {
  width: 200,
  height: 240,
  itemId: 'gridtest',
  renderTo: document.body,
  features: [{
    groupHeaderTpl: 'Subject: {name}',
    ftype: 'groupingsummary'
  }],
  store: {
    model: 'TestResult',
    itemId: 'testStore',
    //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'
  }],
  tbar: [{
    xtype: 'button',
    text: 'Group',
    handler: function(button, e) {
        var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
        store.group('subject');
    }
  }, {
    xtype: 'button',
    text: 'clear',
    handler: function(button, e) {
        var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
        store.clearGrouping();
    }
  }]

});

Ext.create('Ext.window.Window', {
  title: 'Hello',
  height: 200,
  width: 400,
  layout: 'fit',
  items: [grpGrid]
}).show();

ExtJS 4.2.3 Grouping Bug

2 Answers