ExtJS grid emptyText not visible in panel with vbox layout

0
votes

I'm using Ext JS 5.1.0. If I create a grid in a vbox layout with no records, the emptyText is rendered in the DOM, but the height of the grid is calculated incorrectly and the text is not visible. Is there a way to get it to automatically grow without having to set a height?

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

I have a fiddle here: https://jsfiddle.net/DSoa/ctx6vmkz/1/

1
extjs

1 Answers

0
votes

Add layout: 'auto' to the grid config.