Grouped Header Column size

Question

I have a grouped header grid. The grid definition can be found in the fiddle here .

The result looks like this.

I want all the columns to be of equal space, including the ones inside the grouped header. What am I doing wrong?

Answer 1

Ext JS currently doesn't support this behavior. I had this exact same problem. It's not really a bug because the source code explicitly states this you can't do this, but it seems to be one of the biggest shortcomings of grids (right next to locking columns).

My solution was to override the Ext.grid.ColumnLayout#completeLayout method in 4.1.0. This is where the child item (column) widths are determined. What you're basically looking to do is take the total width available to your grid (available via the provided layout/context objects) and manually convert flex->width on all leaf columns. Then, for each group of columns you can sum the calculated widths and set the parent width. Doing this in the completeLayout method means that it runs automatically during each layout so you don't have to muck around with watching resize events and such.

With a good debugger and a fair amount of patience you can figure it out. I'd like to post a code example but my solution was about 100 lines and is part of my work code. I can still point out a few caveats though:

1. If you only have to support 2 levels of headers, don't bother making the whole method recursive for 3+ levels. YAGNI.

2. Watch out for hidden columns. I believe there was a bug where a hidden group header didn't set the hidden property on child columns. One of my more common problems was that showing a column would shift everything in bizarre ways.

3. Watch out for unsealed groups. I solved this by making every column sealed, but if being able to freely move columns is part of your requirements then you may need to take extra steps.

Although honestly, the best solution would be to file this as a feature request on the Sencha forums and ask them why such an important feature is still non-existent in the Ext JS library.

EDIT: Posted source code to the Sencha support forums .

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
     }]
}

Answer 3

You tried to set up to the grouped column flex 4 times smaller (commented 0.25 value), but shouldn't it be actually 4 times larger?

Extjs flex