Extjs 自动调整网格列以适应现代工具包中的内容答案

【问题标题】：Extjs autosize grid columns to fit content in Modern toolkitExtjs 自动调整网格列以适应现代工具包中的内容
【发布时间】：2021-04-23 04:31:28
【问题描述】：

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

这在 Classic 中是可能的，但在 Modern 工具包中似乎不可能。

【问题讨论】：

只是好奇，这是如何在 Classic 中完成的？
我正在使用 autoSize 功能：例如myGrid.getColumns()[1].autoSize()
啊，我明白了...我认为这是您可以在网格/列上进行的一些设置，但我假设您在加载数据后的某个地方调用了此方法？

标签： extjs

【解决方案1】：

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

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

【讨论】：

【解决方案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": "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"
            }]
        });

        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.
                }]
            }]
        });
    }
});

【讨论】：