how to show "No data available " message at center of extjs grid panel?

Question

I am showing "No data available " message in grid when there is no data to show.but by default its showing at upper left corner of grid. I want this message at the center of grid view. here is code:

viewConfig : { 
    deferEmptyText: false,
    emptyText: 'No data Available'
}

I tried by overriding style like this:

.x-grid-empty {
    text-align: center;
    padding-top: 130px !important;
}

but it didn't work.

Answer 1

Note that you can also use HTML in the emptyText definition which, when matched with some nice CSS, can make things look super nice:

        viewConfig: {
            preserveScrollOnRefresh: true,
            deferEmptyText         : true,
            emptyText              : '<div class="grid-data-empty"><div data-icon="/" class="empty-grid-icon"></div><div class="empty-grid-headline">Nothing to see here</div><div class="empty-grid-byline">There are no records to show you right now. There may be no records in the database or your filters may be too tightly defined.</div></div>'
        }

You can even change the emptyText depending on conditions of the grid:

    me.store.on( 'load', function( s, recs ){
        if (recs.length == 0) me.getView().emptyText = me.storeEmptyText;
        else me.getView().emptyText = me.filtersEmptyText;
        me.getView().refresh();
    } );

The above will change the emptyText based on whether your store is actually devoid of data or if you've just applied filters to the point that there are no more records to display. We use this to change messaging from something like:

"There's no content to show you."

to:

"Your filters are a little too strict. Try loosening them a little."

Answer 2

To make this work, you have to add a cls to your grid, for example cls : 'customgrid'. After that, create the following CSS rule:

.customgrid .x-grid-empty {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
} 

And you should see your empty text centered.

Here is a sample code and a fiddle:

Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name'],
        data: [],
        proxy: {
            type: 'memory',
            reader: 'array'
        }
    });


    Ext.create('Ext.grid.Panel', {
        margin: 10,
        store: 'simpsonsStore',
        cls: 'customgrid',
        border: true,
        columns: [
            {header: 'Name',  dataIndex: 'name', flex: true}
        ],
        viewConfig: {
            deferEmptyText: false,
            emptyText: 'No data Available',
        },
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });

https://fiddle.sencha.com/#fiddle/bvp

Answer 3

var grid = Ext.create('Ext.grid.Panel', {
    viewConfig: { emptyText: 'no_data' },
    store: ...,
    columns:[
                ....
    ],
    width: ...,
    renderTo: Ext.getBody()
});