How to show the message "No data" in the center of the extjs grid panel?

Question

I show the message "No data" in the grid when there is no data for show.but, by default its display in the upper left corner of the grid. I want this message to be in the center of the grid. here is the code:

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

I tried redefining the style as follows:

 .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 definition of emptyText, which when matched with some pretty 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 emptyText depending on grid conditions:

  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 value of emptyText based on whether your store is really dataless or if you just applied filters to the fact that there are no more entries to display. We use this for messaging from something like:

"There is no content to show you."

in

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

Answer 2

To make this work, you have to add 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 that your empty text is centered.

Here is a sample code and 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() }); 

Answer 4

a little modification worked for me ... by placing deferEmptyText outside the viewConfig.

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