Extjs自动调整网格列的大小以适应Modern工具箱中的内容

Question

如何自动调整网格列的大小，使其具有显示内容所需的宽度？

这在经典中是可能的，但在现代工具包中似乎不可能。

Answer 1

看起来这最终在7.0.0中进行了排序，并将autoSize方法添加到Ext.grid.column.column中，使其与Classic持平。

不过，它在7.0.0到7.3.1中无法正常工作，并且无法将宽度设置为正确的文本大小。典型的低质量

Answer 2

'Ext.grid.column.column.autoSize(('方法在v7.0中实现。它不适用于灵活的列(经典工具包中的AFAIK也是如此(。请查看以下示例：

Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "[e-mail]",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "[e-mail]",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "[e-mail]",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "[e-mail]",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.Panel', {
title: 'Simpsons',
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Button 1',
handler: function(btn) {
var grid = this.up('panel').down('grid');
grid.getColumns().forEach(function(column) {
column.autoSize();
})
}
}]
}, {
xtype: 'grid',
height: 200,
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 1 // Will not autoSize.
}]
}]
});
}
});