PDA

View Full Version : changing width of columns messes up the width of the grid



adeelmahmood
27 Aug 2012, 11:56 AM
i have a grid setup with forceToFit as false and one of the columns with flex=1 setting and all other columns with a fixed width. on page load the grid shows up fine and the grid takes the full space available .. if i however resize the column with flex=1 setting then the grid ends up taking less than the available space so if i make the flex=1 column really small then there is a bunch of blank space on the right side of the grid .. how can i trigger a reset of the grid width after the flex column has been resized.
Thanks

droessner
27 Aug 2012, 12:01 PM
If all of your other columns have a fixed width, why would you expect them to resize? Only flex columns will resize to fit the width. The other columns will stay the fixed width unless they are manually resized. That is the expected behavior.

adeelmahmood
27 Aug 2012, 12:10 PM
i am talking about manually resizing the flex:1 column .. yes resizing all other columns automatically adjusts the flex:1 column but manually resizing the flex:1 column decreases the overall width of the grid and then never fixes it back

droessner
27 Aug 2012, 12:14 PM
After you manually resize the flex column, it has a fixed width. Since you then have a grid where ALL of your column have a fixed width, the grid won't stretch the columns to fit its width. What exactly are you expecting to happen? What is supposed to automatically resize after you've manually resized the flex column?

scottmartin
27 Aug 2012, 12:25 PM
Just make your last column flex as well:



Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : '[email protected]', 'change' : 100 },
{ 'name' : 'Bart', 'email' : '[email protected]', 'change' : -20 },
{ 'name' : 'Homer', 'email' : '[email protected]', 'change' : 23 },
{ 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change', flex: 1 } // eliminate dead space
],
height : 200,
width : 400,
renderTo : Ext.getBody()
});?


Scott.

adeelmahmood
27 Aug 2012, 9:09 PM
After you manually resize the flex column, it has a fixed width. Since you then have a grid where ALL of your column have a fixed width, the grid won't stretch the columns to fit its width. What exactly are you expecting to happen? What is supposed to automatically resize after you've manually resized the flex column?

makes sense .. i guess i was looking for ways how other people have handled this situation

adeelmahmood
27 Aug 2012, 9:10 PM
works perfect .. thanks