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

EN

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