Dynamic empty text can be used to show the reason why the grid have not been loaded i.e. “Data not found”, “Service is not available temporarily” etc. The additional feature is base on the ‘setEmptyText‘ method of the ‘Ext.view.Table‘. In the override I have added getter and setter methods for empty text ‘setEmptyText’ and ‘getEmptyText’ the ‘Ext.grid.Panel‘ so you will not have to call it from the view of the grid.

The following CSS for the theme’s package will be added to ‘PACKAGE_MAME/sass/etc/all.scss’ file. Do not forget to rebuild your application.

.x-grid-empty-text {
    width: 100% !important;
    height: 99% !important;
    overflow: hidden;
}

.x-grid-empty-text > .message {
    text-align: center !important;
    font-size: 50px;
    color: grey;
}

The Override:

Ext.define('overrides.grid.Panel', {
    override: 'Ext.grid.Panel',

    setEmptyText: function(emptyText) {
        this.emptyText = emptyText;
        var emptyTextHtml = this.generateEmptyTextHtml(emptyText);
        this.getView().setEmptyText(emptyTextHtml);
        return this;
    },

    getEmptyText: function() {
        return this.emptyText;
    },

    generateEmptyTextHtml: function(emptyText) {
        var emptyText = '<div class="x-grid-empty-text">'
                + '<p class="message">' + emptyText + '</p>'
            + '</div>';
        return emptyText;
    }
});

Sample Usage: