Grouped Column Size

Question

I have a grouped heading grid. The grid definition can be found in the script here .

The result is as follows.

I want all columns to have equal space, including inside a grouped header. What am I doing wrong?

Answer 1

Ext JS does not currently support this behavior. I had the same problem. This is not a mistake, because the source code explicitly states that you cannot do this, but it seems to be one of the biggest drawbacks of grids (next to blocking columns).

My solution was to override the Ext.grid.ColumnLayout # completeLayout method in 4.1.0. The width of the child element (column) is determined here. What you are basically looking for is to make the total width available for your grid (accessible through the provided layouts / context objects) and manually convert the flex-> width in all columns of the sheet. 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 starts automatically during each layout, so you don’t have to guess when viewing resize events, etc.

With a good debugger and enough patience you can figure it out. I would like to post a sample code, but my solution was about 100 lines and is part of my working code. I can still point out a few caveats:

• If you need to support only 2 levels of headers, do not worry that the whole method is recursive for levels 3+. YAGNI.

• Watch out for hidden columns. I believe that there was an error when the hidden group header did not set the hidden property in the child columns. One of my more common problems was that displaying a column will change things differently.

• Beware of unsealed groups. I solved this by making each column sealed, but if being able to freely move columns is part of your requirements, you may need to take additional steps.

Although honestly, the best solution would be to write this as a function request in the Sencha forums and ask them why such an important function is still missing from the Ext JS library.

EDIT: Sent source code for Sencha support forums .

Answer 2

If you want to use auxiliary columns, for example, others, for example, you have 2 columns with a fixed width, and grouped columns should behave like columns with flex ( auto width ), you need to write your own function for resizing.

These are just two lines: sencha example

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

Mesh receiver:

 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 adjust the flexibility of a column column to 4 times less (commented value of 0.25), but should it not be 4 times more?

Extjs flex