Sub columns does not fit under wide grid column in ExtJs 4

Question

​If I have grid column in a ext grid, sub columns(​ Email and phone columns in the demo) does not match up. Here is the demo : https://fiddle.sencha.com/#fiddle/5ih I have played with the width/minWidth etc but doesn't seem to work. But if I make the grid column less wide sub columns seems to fit perfectly.

Answer 1

I thin tha maybe the problem is that you must give the minWidth to fix the header, and add the flex property to each column. Here is the fork of your fiddle with the change I say.

minWidth : 500

flex : 1

https://fiddle.sencha.com/#fiddle/5iq

Answer 2

If you would like to use the sub columns like the others, for example you have 2 columns which has fixed width, and the grouped columns should behave like columns with flex (auto width), you need to write an own function to do this resize.

It's only two lines: sencha example

Description: you need to add a resize event listener to grid and inside the function resize the sub column(s)

Grid listener:

listeners: {
    resize: function(grid) {
        // you need to add and itemId for the sub columns parent
        var subCols = grid.getView().getHeaderCt().child('#sub-cols');
        // 200 = sum of the fixed width of columns
        subCols.setWidth(grid.getWidth() - 200);
    }
}

Grid columns:

{
    text: 'sub columns',
    itemId: 'sub-cols',
    columns: [{
        text: 'Email',
        dataIndex: 'email',
        flex: 1
     }, {
        text: 'Phone',
        dataIndex: 'phone',
        flex: 1
     }]
}