Button background color in ExtJS 6 does not change

Question

I know that there is many post on this subject, but even after looking at all and trying to use all the "cls" configs, the background color of my button does not change.

Here's my code:

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

What am I doing wrong ?

ANSWERS

So the problem was from the gray theme of ExtJS. I needed to remove the background-image of the button in order to add a background color. Thanks to @Alexander for his answer.

Correct code:

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

Another option would have been to use a "afterRender" event to change the background color. However, it does just change the text background color. Thanks to @nenadg for this answer.

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

The issue has to be with your theme. Which theme do you use? In triton, your code works for me. — Alexander, Feb 19 '16 at 16:04
Gray theme uses background-image, which has precedence over background-color. [Try `background-image:none !important;`.](https://fiddle.sencha.com/#fiddle/15vl) — Alexander, Feb 19 '16 at 16:07
Works fine ! Thanks ! I'm editing the post with your answer ! — kaycee, Feb 19 '16 at 16:09

score 0 · Answer 1 · answered Feb 19 '16 at 15:19

0

Try this :

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

answered Feb 19 '16 at 15:19

David H.

953
1
8
20

Thanks for your answer, but It doesn't work even with that. – kaycee Feb 19 '16 at 15:21

score 0 · Answer 2 · answered Feb 19 '16 at 15:40

0

Instead of cls, try using userCls property for additional styles.

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

answered Feb 19 '16 at 15:40

nenadg

420
11
16

As I said, I used all the "[...]cls" config class and none seem to be able to change the background color. I think it has to do with some style class overide... – kaycee Feb 19 '16 at 15:51
1

I don't know what kind of overrides you use, but you could hack it in afterrender event: `this.btnInnerEl.addCls('multiColor-btn');` – nenadg Feb 19 '16 at 16:00

Button background color in ExtJS 6 does not change

2 Answers2