Цвет фона кнопки в 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; 
} 

Answer 2

Вместо ЦБС, попробуйте использовать userCls свойство для дополнительных стилей.

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