PDA

View Full Version : Auto fit column widths instead of having fix widths



webfriend13
3 May 2013, 11:02 PM
Hi All,


We are using ExtJs 4.1 and making use of grid extensively. Right now we have hard coded the width for each column, we want to make column auto fit based on the content of the gird. We should also be able to set max and min width of the column. Please let me know if we have any plugin or if there is a feature in ExtJs 4.2 for the same

Thank you.

slemmon
6 May 2013, 12:04 PM
4.1.x did not have an autofit solution, but 4.2 did introduce a method to fit the column width to the content. I haven't tried it myself just yet so I'm not sure how well it plays with minWidth / maxWidth.
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.column.Column-method-autoSize

richardvd
20 May 2013, 7:43 AM
Thanks, I needed this feature too. I tested it in 4.2.0 and autoSize() works, and it respects minWidth / maxWidth. Great!

In the example below I set all three columns to a width of 150, and I also gave the second column a minWidth of 150. Upon refresh of the grid autoSize() is run on the first two columns.

The result is that the first column is now just wide enough to fit its content, the second column is still 150 pixels wide because of the minWidth setting, and the third column is still 150 pixels wide because autoSize() wasn't called on it.

43879
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name', width: 150, autoSizeColumn: true },
{ text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 },
{ text: 'Phone', dataIndex: 'phone', width: 150 }
],
viewConfig: {
listeners: {
refresh: function(dataview) {
Ext.each(dataview.panel.columns, function(column) {
if (column.autoSizeColumn === true)
column.autoSize();
})
}
}
},
width: 450,
renderTo: Ext.getBody()
});

ypandey
25 Mar 2014, 7:23 AM
autoSize isn't working properly with bufferedrenderer grid.
because getMaxContentWidth(header) returns maxWidth of rendered cells only.
So column width will set only according to those rows which have been rendered immediately after refresh.

So in this case, refresh event is not appropriate place to call autoSize.
Any other event which can be used?

gmcgrath
26 Mar 2014, 3:50 PM
You can also use the flex property on the column


(https://fiddle.sencha.com/#fiddle/4id)Ext.create('Ext.data.Store', {
(https://fiddle.sencha.com/#fiddle/4id) storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});




Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1, minWidth:250 },
{ text: 'Email', dataIndex: 'email', flex: 3, maxWidth: 150 },
{ text: 'Phone', dataIndex: 'phone', width: 150 }
],
width: 700,
renderTo: Ext.getBody()
});
(https://fiddle.sencha.com/#fiddle/4id)
https://fiddle.sencha.com/#fiddle/4id

ypandey
26 Mar 2014, 11:46 PM
You can also use the flex property on the column


Hi Gmcgrath,
This thread is on auto fit column based on the content in the grid.
"flex" adjusts column width based on width of the grid.

mattjenkins
13 Apr 2014, 9:50 AM
There is a bodyscroll event on the view that might work.