Search code examples
extjsextjs4extjs4.2

ExtJS explicit groups

I would like to define groups for an ExtJS 4.2 grid, so that all group headers would be displayed even if they contain no rows.

Ext.define('myModel', {
    extend: 'Ext.data.Model',
    fields: ['myField']
});

var myStore = Ext.create('Ext.data.Store', {
    model: 'myModel',
    groupField: 'myField'
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
    enableGroupingMenu: false
});

var packagesTable = {
    xtype : 'Ext.grid.Panel',
    store : 'myStore',
    features: [groupingFeature]
}

So in my case, myField has a set of possible values, for every one of which I would like to have a group header permanently displayed - even if the group is empty.

Solution

  • As far as i know, you need to have a record in order to have a group, but you can "cheat" by having an empty record with only the desired field. This is a working fiddle but i'm guessing some validations should be added, depending on what you need from the grid

    https://fiddle.sencha.com/#fiddle/c26