javascript - ExtJS 6 中的按钮背景颜色没有改变

Question

我知道有很多关于这个主题的帖子，但即使在查看所有内容并尝试使用所有“cls”配置之后，我的按钮的背景颜色也没有改变。

这是我的代码:

var miscTools = Ext.create('Ext.panel.Panel', {
    title: 'Tools',
    id: 'toolsPanel',
    bodyPadding: 5,
    height: 200,
    border: false,
    collapsible: false,
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },
    items: [{
        xtype: 'button',
        id: 'colorToolButton',
        text: 'Auto color tool',
        cls: 'multiColor-btn',
        handler: colorWindow
    }]
})

CSS:

.multiColor-btn {
    background-color: yellow;
}

我做错了什么？

答案

所以问题出在ExtJS的灰色主题上。我需要删除按钮的背景图像以添加背景颜色。感谢@Alexander 的回答。

正确的代码:

.multiColor-btn {
    background-image: none !important;
    background-color: yellow !important;
}

另一种选择是使用“afterRender”事件来更改背景颜色。但是，它只是改变了文本背景颜色。感谢@nenadg 的回答。

Ext.getCmp('colorToolButton').btnInnerEl.addCls('multiColor-btn')

Answer 1

试试这个:

.multiColor-btn {
    background-color: yellow !important;
}