Search code examples
extjsextjs4extjs4.1extjs4.2

In ExtJS, how to disable hover over style change on Toolbar button disabled?

I have a toolbar in ExtJS and I have a button, I am actually disabling the button in some cases if the user doesn't have access. If I disable it, it is disabled and doesn't launch the client event. So that's great.

But hovering over the button still changes the background color of the button indicating to the user that its enabled and its not.

I tried looking into some CSS issues but I couldn't find anything.

How can I to do this? The only thing I am doing on the button Item is:

        disabled: !isAdmin

and the toolbar is being created like so:

   var toolbar = Ext.create('Ext.toolbar.Toolbar', {
        dock: 'top',
        width: 700,
        height: 56,
        items: [

Am I missing something?

Solution

  • I have created Sencha fiddle for the same it works fine. I tried with Extjs 4.2 version also and it don't change background color on hover for disabled button

    https://fiddle.sencha.com/#fiddle/14j8

    Check overCls for more information