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

k7fdbhmy  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(190)

如何自动调整网格列的大小,使列的宽度达到显示内容所需的宽度?
这在Classic中是可能的,但在Modern工具箱中似乎不可能。

92dk7w1h

92dk7w1h1#

看起来,在7.0.0中,这最终被排序了,并且autoSize方法被添加到Ext.grid.column. column中,以使其与Classic等同。
但是在7.0.0到7.3.1中它不能正常工作,并且不能将宽度设置为文本的正确大小。

2j4z5cfb

2j4z5cfb2#

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

相关问题