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

时间:2014-03-14 17:52:07

标签: javascript css extjs extjs4

我的按钮

         [...]
         {
            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等),但它不会显示在按钮上。

我尝试过!重要的,同样的问题。

如果我直接用

申请我的CSS
cls: test1

它正在发挥作用。

感谢您的提示!

1 个答案:

答案 0 :(得分:1)

似乎框架自动将" x - " 前缀附加到你的overCls类名; 在您的班级名称中添加前缀" x - " ,这样就可以解决问题,

.x-test1 {....}

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