按钮上的 overCls 在 ExtJS 中不起作用

Question

我的按钮

         [...]
         {
            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
                }
            }]
        }, [...]

还有我的 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 */
}

但是，这不起作用。 当按钮悬停时，会应用 CSS 类（我可以在控制台中看到它，x-btn-test1 而不是 x-btn-over 等），但它不会显示在按钮上。

我尝试了 !important，同样的问题。

如果我直接使用我的 css

cls: test1

它正在工作。

感谢您的提示！

Answer 1

似乎框架自动将“x-” 前缀附加到您的 overCls 类名； 在你的类名中添加前缀“x-”，这样应该可以解决问题，就像这样，

.x-test1 {....}

您可以看到working sample here。希望对您有所帮助。