Adding Ext.grid.feature.Grouping to grid breaks expand/collapse

[alex9311]

Hey all,

I'm messing with the grid grouping features so I can change the groupHeaderTpls for my groups. I got the headers to look how I want but now the expanding/collapsing isn't working. Is there a workaroud for this?

Here is my Grid.js code, the commented features line is from my old version, this does allow expanding/collapsing.

Ext.define('BZ.view.blaze.Grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.blazegrid',
        store: 'Blaze',
        autoScroll: 'true',
        //features:[{groupingFeature}],
        features: [Ext.create('Ext.grid.feature.Grouping', {
                        groupHeaderTpl: '{name} ({rows.length})',
                        collapsible: true,
                })
        ],
        initComponent: function(){
                var dateRender = Ext.util.Format.dateRenderer('m/d/Y');
                this.columns=[
                        {header: 'Subject',     dataIndex: 'subject',   width:175},
                        {header: 'Sender',      dataIndex: 'sender',    width:75},
                        {header: 'Attachment',  dataIndex: 'attachment',        width:40,
                                renderer: function(value){
                                        if(value=='')
                                                return '';
                                        else
                                                return '<img src="ext/resources/themes/images/default/grid/accept.png" />';
                                }
                        }
                ];
                this.callParent(arguments);
        }
});

I declare a groupField in my store file

Ext.define('BZ.store.Blaze', {
        extend: 'Ext.data.Store',
        model: 'BZ.model.Blaze',
        data: [
                 //hardcoded data
        ],
        groupField: 'course',
        sortOnLoad: true,
        sorters: [{
                property: 'date',
                direction: 'DESC'
        }]
});

[mitchellsimoens]

You should not do this:

        features: [Ext.create('Ext.grid.feature.Grouping', {
                        groupHeaderTpl: '{name} ({rows.length})',
                        collapsible: true,
                })
        ],

Should really be like:

        features: [
                {
                        ftype : 'grouping',
                        groupHeaderTpl: '{name} ({rows.length})',
                        collapsible: true,
                }
        ],

[alex9311]

This works perfectly, thank you!