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;
}

Answer 2

请尝试将userCls属性用于其他样式，而不是cls。

http://staging.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.Component-cfg-userCls

ExtJS 6中的按钮背景颜色不会改变

2 个答案: