overCls on a button does not work in ExtJS

Question

My button

         [...]
         {
            xtype: 'button',
            overCls: 'test1',
            text: 'Référentiels',
            scale: 'medium',
            margin: '5 0 5 0',
            menu: [{
                text: 'Import',
                iconCls: 'importIcon',
                listeners: {
                    click: Import
                }
            }, {
                text: 'Consultation',
                iconCls: 'searchIcon',
                listeners: {
                    click: Consultation
                }
            }]
        }, [...]

and my CSS :

.test1
{
background: #ffb76b; /* Old browsers */
background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04      100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b),  color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /*   Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%);  /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
}

However, this is not working. When the button is hovered, the CSS class is applied (I can see it in the console, x-btn-test1 instead of x-btn-over, etc) but it does not display on the button.

I tried with !important, same problem.

If I apply my css directly with

cls: test1

it's working.

Thanks for tips !

Answer 1

It seems that the framework auto-appends the "x-" prefix to your overCls class name; add the prefix "x-" to your class name, that should solve the problem, like this,

.x-test1 {....}

You can see a working sample here. Hope it helps.