PDA

View Full Version : How to hide the hand hover on a button



saiswa
8 Nov 2010, 3:48 PM
Hello, I have a button which I'm using as a clickable image that changes color based off backend data.
When the button is of one color, I want to remove the hand hover icon & other effects for the button. At other times, the hover effects need to be shown. How can I achieve this?
Here's my code:


xtype: 'button',
iconCls:'color1',
handler: function(e, t) {
if (e.iconCls === 'color2') {
this.fireEvent('btnColor2Click');
} // click for color 1 is ignored
}

Setting handleMouseEvents=false simply removes the highlighting of the button but doesn't remove the hand icon.
Setting overCls adds an additional icon based off the icon class in addition to the hand icon but doesn't remove the hand icon.

Any tips greatly appreciated. Thank you.

evant
8 Nov 2010, 7:14 PM
You can set the button to disabled.

saiswa
9 Nov 2010, 4:39 PM
Thanks for responding.
This works in removing the hand icon. However, this reduces the opacity of the icon to 0.6.
To workaround, I tried setting the disabledClass to 'x-item-disabled class_opaque' where class_opaque will set the opacity to 1.0 avoiding the graying out.
However, this is still overridden by .x-toolbar .x-item-disabled, though I've set it in my CSS class file below ext-all.css.
If I set disabledClass to '', I avoid the graying but still get the hand cursor.
Any tips?

saiswa
9 Nov 2010, 5:00 PM
I found a workaround: setting disabledClass to 'x-btn-disabled' works.