extjs4 how to automatically set grid column width to max width of contents?
If you create a grid with no column width or flex attributes, the columns will default to 100px each.
If you then double click on a header separator, the colum开发者_StackOverflow中文版n to the left auto expands to the size of the largest data item in that column.
Is there any way to configure some columns to automatically have that behavior?
forceFit: true
on your GridView config will force the columns to fill all remaining space.
forceFit : Boolean Specify true to have the column widths re-proportioned at all times.
The initially configured width of each column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually or programmatically), the other columns in the grid will be resized to fit the grid width.
Columns which are configured with fixed: true are omitted from being resized.
So I guess forceFit is no longer recommended by sencha, you should try using the autoSize method:
Edit: There you go with an brief example, it works on the first column :)
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) {
dataview.panel.columns[0].autoSize();//works on the first colum
}
}
},
width: 450,
renderTo: Ext.getBody()
});
I had the same problem, hope it helps!
some of the column might be very wide, for example:description text or a long name. If you set the field width auto, some of the column may take up significant space on your view. What should be the maximum width limit in this scenario. 50 CHAR, 100 CHAR ?
精彩评论