ExtJS 6 -- 自动调整网格列标题文本

sta*_*ato 2 extjs

有没有办法设置列宽以匹配列文本的宽度?如果需要,用户可以调整列的大小以查看内容,但我希望至少显示完整的标题文本,即使列内容不是。

谢谢

pag*_*gep 5

是的,它应该是可能的。您可以在列上调用autoSize()方法。您可以将其与minWidthmaxWidth结合使用。

我在 Ext 4.2 的 Sencha 论坛上找到了这个例子,所以它应该与 Ext 6.2 非常相似:

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()
});
Run Code Online (Sandbox Code Playgroud)