Reputation: 125
we have a grid with 6 columns. One column requires more width compae to others. We have to ahow all the columns in that grid without any horizontal scroll bar.
The code we tried for this is:
{
xtype: 'grid',
viewConfig: {
forceFit: true,
}
columns: [{
header: 'column1'
}, {
header: 'column2'
},
//...
{
header: 'column6',
flex: 2
}]
}
The above code worked fine in IE8. But in IE9 and Google Chrome, the 6th column content is not displayed.
Could anyone please suggest how to solve it?
Upvotes: 4
Views: 13454
Reputation: 4421
Remove the forceFit, you can just flex multiple columns, you can use flex 2 vs 1 on the column you want a bit wider.
{
xtype: 'grid',
columns: [{
header: 'column1',
flex: 1
}, {
header: 'column2',
flex: 1
},
//...
{
header: 'column6',
flex: 2
}]
}
Upvotes: 6