View Full Version : Relative Column width in Grid

20 Dec 2010, 1:52 PM
It looks like the options for sizing a column in a grid are:
1)forceFit:false/autoExpandColumn:'columnId' to get a single column to expand to fill the container
2)forceFit:true to get all columns the same width to fill the container
3)set width = x (pixels) to get absolute width for each column specified

Is there any way to indicate that you want column1 to be 10%, column 2 to be 20% and so on up to 100% as you might in an html table?

20 Dec 2010, 5:27 PM
try using decimals, like having 3 columns and widths of 0.2,0.2,0.6

20 Jul 2011, 2:33 AM
Try with flex property (assigned to each column), here is the Ext-JS4 explanation: http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Box-cfg-flex but this property exists in ExtJS 3 as well.


columns: [{
id: 'column1',
text: "Column 1",
flex: 2,
sortable: true
id: 'column2',
text: "Column 2",
flex: 2,
sortable: true
id: 'column3',
text: "Column 3",
flex: 1
...The sum of all flex values is the 100% of the table with,
also 2+2+1 = 5 is 100%, so the width of the columns with
flex=2 is 2/5 of the total width and the columns with flex=1
have a width 1/5 of the total width.

20 Jul 2011, 6:42 AM
mstefano80, flex does not work with columns in Ext 3, it is for HBox layouts (in Ext 4 Columns are implemented atop HBox, in Ext 3 they are not). Also note that in a HBox the sum of the flex values is not 100% of the width, but correspondends to the width remaing once fixed sized components have reserved their space.

steffenk, that doesn't work with a Grid, though does work with a ListView.

As to the original question, if you want all your columns to resize with proportions (e.g. col 1 30%, col 2 10%, col3 20%, col4 40%) then you can do this by combining explicit pixel widths of 3,1,2,4 (all that matters is the ratios) with forceFit: true and then when the grid resizes so will the columns, maintaing proportions. The tricky case is if you want some columns to be a fixed width of pixels, but then more than 1 other to resize according to some propotion (if you only want 1, use autoexpandColumn). In a HBox you can do this by combining explicit widths with flex. I'm not aware of a way of easily doing it in Grids.