Question

I’m using the Sencha ExtJS Framework in Version 4.05 and i have the following problem. I am displaying Ext.Grids which have a pagination toolbar at the bottom of the Grid. On the Sencha Sample Page the Grids will display some buttons (first-page, prev-page, next-page, last-page, refresh) with icons on it.

Unfortunately the icons are not displayed in my Grids:

As you can see, the buttons are actually there, and they’re working correcrly, only the icons are not displayed.

The references to the images are correct and the images are there and accessible for the browser. (If i view the css of the button in Firebug and hover the imageurl it will display the correct icon).

One thing i noticed is, that for some reason the <span> Element which should display the icon is “grayed out” in the firebug view. (On the Sencha example page it is not).

The CSS of that element looks fine for me:

Note: The complete CSS File used can be found HERE

A short note on the Theme: i made this grey theme (named “documents”) just by changing the main colour of the .sass template and compiling the ext-all.css to a new one for my theme. So i didn’t change anything with the icons.

Any suggestions what could cause this problem?

Answer 1

Hard to debug without access to the actual code. However, I noticed that both in the CSS you copied above as well as the css link you posted (which was supposedly the whole css), that neither set of css (that I could find) had any reference to the x-btn-icon class by itself, and yet that is the class (along with x-tbar-loading) that is on your grayed out span element. So, what is that class doing? Where is it defined? There may reside your issue.

EDIT: I went to the Sencha website and firebugged an icon on the grid sample. When I deleted the x-btn-icon class from the element, I believe I duplicated your problem. So it seems that the necessary definition of that class is missing from your css. On their site it is defined in the ext-all.css.