ExtJS 网格 emptyText 在具有 vbox 布局的面板中不可见

Question

我正在使用 Ext JS 5.1.0。如果我在没有记录的 vbox 布局中创建网格，则 emptyText 在 DOM 中呈现，但网格的高度计算不正确并且文本不可见。有没有办法让它自动增长而无需设置高度？

Ext.onReady(function () {
    Ext.define('Foo', {
        extend: 'Ext.data.Model',
        fields: ['foo']
    });
    Ext.define('FooStore', {
        extend: 'Ext.data.Store',
        model: 'Foo',
        data: [
               /*
            { foo: 'foo1' },
            { foo: 'foo2' }
            */
        ]       
    });
    var fooStore = Ext.create('FooStore', {});

    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [
            {
                xtype: 'grid',
                title: 'Foo Grid',
                store: fooStore,
                //height: 200, /* uncomment this and emptyText will be visible */
                viewConfig: {
                    emptyText: 'No foos found',
                    deferEmptyText: false
                },
                columns: [
                    { text: 'Foo', dataIndex: 'foo', flex: 1 }
                ]
            }
        ]
    });
});

我这里有个小提琴：https://jsfiddle.net/DSoa/ctx6vmkz/1/

Answer 1

将layout: 'auto' 添加到网格配置中。