how to apply css to extjs grid emptytext?


Tags: javascript,css,extjs,extjs4

Problem :

Is there any special class applied to a grid's emptyText? I tried to check with Firebug inspecting the element and found only this:

<div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default
 x-unselectable" role="presentation" tabindex="-1" style="-moz-user-select: none; width: 398px; height: 150px;">
There are no items to show in this view.
</div>

It seems like there is no special class to identify and apply CSS to emptyText. Is there any way to add a class, or a special way to style the empty text?

Note:

I did this and it worked nicely for me:

emptyText: '<div style="width:auto; text-align:center; padding-top:50px; color:red; font-weight:bold;">There are no items to show in this view.</div>'


Solution :

columns:[{
                header: 'columnName',
                dataIndex: 'dataIndex',
                renderer: function(value, metaData, record, rowIndex) {
                      if (value == '')
                        metaData.tdCls = 'emptyText'; 
                }
}]

And you should define emptyText css rule. This custom renderer applied to specific column


    CSS Howto..

    How to give line-break from css, without using
    ?

    How to segregate these divs with 'position:absolute' into different groups?

    How did overflow actually work here?

    How do I inline the :before element when unable to include a CSS/style section?

    How to select a certain element in CSS by numerical position

    How to make an image resize to the screens height with CSS?

    CKEditor issue: How to apply custom css to CKEditor [closed]

    How can I get jQuery or Javascript to change css based on the current url?

    how to accomplish this border effect in css?

    In Jsoup, how do I parse the CSS query by the attribute, instead of the data?

    How to force enter key to make a line break inside iframe editor

    How to ONLY target Chrome DevTools window in CSS?

    How can I make these CSS absolute positions work in IE?

    CSS how to select nav and li tags but exclude specified class?

    How do I edit an external css file with PHP?

    CSS Mega Menus: How to target ul's except those in divs

    How do I make a DIV tag stretch to the size of it's children?

    How can I create a color with values for green, blue, orange, and gold only?

    CSS - How to center a div relative to a background image positioned as cover

    How to change angularJS's default css styles? Search box etc

    How to detect CSS is turned off with PHP?

    How do you deploy a project using Less CSS to Heroku?

    How to do Background Image horizontal slide

    How to make jQuery slide open and close with CSS class

    How to get rid of white space between css horizontal list items? [duplicate]

    CSS HTML How to align image within div to bottom right

    How to get the real font name of a div on a web page when it set css font-family?

    How to make these jquery pop ups fall back to css when javascript disabled

    Rails - how to build a grid-like list of product page

    How do I horizontally extend the clickable area of an inline span?