ExtJS 6中的按鈕背景顏色不變

我知道這個主題上有很多帖子，但即使在查看所有內容並試圖使用所有「cls」配置後，我的按鈕的背景顏色也不會改變。ExtJS 6中的按鈕背景顏色不變

這裏是我的代碼：

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')

來源

2016-02-19 kaycee

這個問題必須與您的主題。你使用哪個主題？在triton中，你的代碼適合我。 – Alexander

我使用灰色主題... – kaycee

灰色主題使用背景圖像，它優先於背景顏色。 [嘗試'背景圖像：無！重要;'。]（https://fiddle.sencha.com/#fiddle/15vl） – Alexander

試試這個：

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

來源

2016-02-19 15:19:14

感謝您的回答，但即使如此，它也無法正常工作。 – kaycee

而是CLS的，請嘗試使用userCls屬性附加的樣式。

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

來源

2016-02-19 15:40:48 nenadg

正如我所說的，我使用了所有的「cls」配置類，但似乎都沒有能夠改變背景顏色。我認爲它與一些風格類的重疊... – kaycee

我不知道你使用的是什麼樣的覆蓋，但你可以在afterrender事件中破解它：'this.btnInnerEl.addCls（'multiColor-btn'）; ' – nenadg

謝謝你的回答！它工作正常！ – kaycee

ExtJS 6中的按鈕背景顏色不變

回答

相關問題