ExtJS 5 Grid Cell Width Calculation Wrong Using Flex

Question

After upgrading to ExtJS 5 from 4.2.1 I discovered a grid cell width calculation issue or what appears to be an issue.

Here is an example of the columns

columns: [
    { header: 'One', dataIndex: 'one', flex: 2 },
    { header: 'Two', dataIndex: 'two', flex: 2 },
    { header: 'Three', dataIndex: 'three', flex: 3 }
]

The headers fill the grid width as expected but grid cell widths are not equal to the headers in amounts of -5px / -5px / -12 px respectively.

The appearance is as if there is room for a scroll bar but the grid has only one row. Grids that have enough data to have a scroll bar do not appear to have this issue.

Resizing the grid column puts things back in a proper alignment until new data is loaded and rendered again with the width calculations off. It re-sizes soon after a new data load.

I thought that maybe css was to blame but changing themes did not fix it nor did using ext-all.css rather than the debug css.

Is this a bug or have I missed a new config that will correct the width calculations?

If this is a bug ... any suggestions for a work around?

Help much appreciated.

UPDATE 1:

I used Sencha Cmd to generate a basic app and created a grid view with the columns and a features. So far it looks like having a grouping feature seems to be the culprit. However, I do see the behavior on grids without a grouping feature. Those grids are in a border layout so I'll investigate that next.

It does seem like a bug, but it will be close to impossible to be definitive about it without a proper test case. — rixo

Krzysztof Krzysztof · Accepted Answer · 2014-07-28T12:14:37

It looks like bug, however I discovered that wrapping grid with container with auto layout make fixes that issue (at least in my case).

Example: http://jsfiddle.net/nj4nk/3/

In example you can see 2 grids:

first inside panel with fit layout - rows are narrower
second inside panel with auto layout - rows are same as header

ExtJS 5 Grid Cell Width Calculation Wrong Using Flex

2 Answers