Ext.Button iconCls gotcha

[mattbennett]

Hello all,

I was puzzled by the iconCls config option for Buttons. The following fails to work as I would expect:

JS:

var b = new Ext.Button('test-button',{
	iconCls:'an-icon',
	text:'click on me!'
})

CSS:

.an-icon {
	background-image: url(../icons/someicon.png);
	background-repeat: no-repeat;
}

In fact, you *must* specify the class on button:

button.an-icon {
	background-image: url(../icons/someicon.png);
	background-repeat: no-repeat;
}

Hope that saves someone some time,
Matt.

[Animal]

This is not a bug, it's a feature of CSS. selector specificity.

The standard: http://www.w3.org/TR/CSS21/cascade.html

An article: http://cmsproducer.com/css-specificity-inline-important

[mattbennett]

Thanks Animal - that explains a lot.

Matt.

[Lobos]

Thanks Matt, this got me!

-Lobos

[Ebezester]

I have a related issue. When using iconCls on an action, the button specifier must also be used...but then you cannot have an action in both a button and a menu item unless you want to duplicate the class. Once with "button" at the beginning, once without. I cannot figure out why this works in the ext example "actions" and not in my site. Anyone else run into this problem?

CSS:

.sprite-forward { 
background: url(Images/App/sprites.gif) no-repeat top left; 
background-position: 0 -76px }

JS:

new Ext.Action({
                    iconCls: "sprite-forward",
                    text:"View Results",
                    id: "view"
                })

When the action is used for a toolbar action, no icon shows up
When the same action on the same page is used in a context menu as a menu item, the icon shows up nicely.

[LoneTiger]

Ebezester, I had the problem when icon was not showing for Ext.Action. When I added the "button." it works perfectly.

button.icon_new {
	background-image: url(resources/ext/resources/images/default/dd/drop-add.gif);
}

Have you tried using FireBug in FF? If you inspect the element and look to the right where assigned CSS properties are and navigate to the class you are using for icon - "button.sprite-forward" in your case. When you hover over the path FireBug should be able to load the icon and show it. If it doesn't show the path might be wrong.

Hope this helps.

[spudnyk]

To share the same class use the css !important rule. This worked for me

.icon_new {
	background-image: url(resources/ext/resources/images/default/dd/drop-add.gif) !important;
}

[njw]

I have a related issue. When using iconCls on an action, the button specifier must also be used...but then you cannot have an action in both a button and a menu item unless you want to duplicate the class. Once with "button" at the beginning, once without. I cannot figure out why this works in the ext example "actions" and not in my site. Anyone else run into this problem?

CSS:

.sprite-forward { 
background: url(Images/App/sprites.gif) no-repeat top left; 
background-position: 0 -76px }

JS:

new Ext.Action({
                    iconCls: "sprite-forward",
                    text:"View Results",
                    id: "view"
                })

When the action is used for a toolbar action, no icon shows up
When the same action on the same page is used in a context menu as a menu item, the icon shows up nicely.

I also have the same behaviour. Adding the button class does nothing. Interestingly, applying the 'iconCls' makes space for the icon, but the image doesnt appear. If I add the icon directly to the action button using 'icon' its fine. The CSS is valid and functioning; just not when being applied via iconCls to a button/action within a tab panel.

Im using build 2.2.

Any ideas?

[mystix]

i'm using Ext.Buttons from 2.2 with the iconCls config, and my icons are appearing.

are you absolutely sure your css image paths are correct?
(a long shot in the dark, but when updating, did you also update your images and css?)

[boulay]

I had a related question about icons. I can see the icon within the button, no problem. But what do I do to get the icon to replace the button (so that the button becomes an imagebutton)?

Thanks a lot!