Ext JS 4: Grid emptyText

As of Ext JS 4, the emptyText that can display in grid has no styling. It just sits smack up against the top and left sides of the grid. One simple way to style the text is to add some css and put the emptyText inside a span.

.emptyText {
    position: relative;
    top: 10px;
    left: 10px;
}

Of course, more styling such as color and font-size could be added.

And then, when defining your grid, just do this:

{
	xtype: 'grid',
	viewConfig: {
		emptyText: '<span class="emptyText">No rows found.</span>'
	},
	//...
}

I haven’t started using Ext JS 4.1 yet, so I’m not sure if the lack of style for the emptyText will still apply. But until then, this makes the empty text look a little better.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s