Question

There seems to be a defect when using the autoHeight property on the gridPanel along with the grouping feature.

When you set the grouping to startCollapsed the height of the grid is set to the height of the collapsed rows (which is correct) but when I expand a group the height of the grid doesn’t updated and hence the new content pushes old content into an invisible area.

You can replicate the issue easily on the sensha docs http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel by going to the Grouping section and pasting in the code below:

var store = Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['name', 'senority', 'department'],
    groupField: 'department',
    data: {'employees':[
        { "name": "Michael Scott",  "senority": 7, "department": "Manangement" },
        { "name": "Dwight Schrute", "senority": 2, "department": "Sales" },
        { "name": "Jim Halpert",    "senority": 3, "department": "Sales" },
        { "name": "Kevin Malone",   "senority": 4, "department": "Accounting" },
        { "name": "Angela Martin",  "senority": 5, "department": "Accounting" }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'employees'
        }
    }
});

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

Ext.create('Ext.grid.Panel', {
    title: 'Employees',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { header: 'Name',     dataIndex: 'name' },
        { header: 'Senority', dataIndex: 'senority' }
    ],
    features: [groupingFeature],
    width: 200,
    autoHeight: true,
    renderTo: Ext.getBody()
});

What should I do to work around this problem and have the grid resize when I expand or collapse an item?

Answer 1

First off, the autoHeight config is not supported by grid (or by any component).

But the behavior is clearly a bug, and it’s been already fixed in Ext JS 4.1.

For a workaround in 4.0.7 you can explicitly force the layout to happen when groups get expanded/collapsed:

grid.getView().on({
    "groupexpand": function() {
        grid.doLayout();
    },
    "groupcollapse": function() {
        grid.doLayout();
    }
});