Question

我知道大多数用户都问过这个，但我似乎无法做到这一点。我有需要在initialize（）函数上更改颜色的按钮。这是一个例子。

            {
               xtype:"button",
               id:"showme_BTN",
               baseCls:"home-round-btns",
               html:'<img src="resources/icons/show_me.svg">'           
            },

我的初始化函数（），只要应用程序启动就会运行。

   listeners: {
        initialize: function(){  
           //console.log("initialize() works");
           Ext.getCmp('showme_BTN').removeCls('home-round-btns'); //remove old class
           Ext.getCmp('showme_BTN').addCls('home-round-btns-red'); // add new class
        }
    }

您可能会问我为什么要这样做，我想在不同用户上加载个性化颜色，谢谢

Answer 1

addCls function将CSS类添加到表示此组件的顶级元素。它不会在baseCls中添加该类，它会在cls中添加类。

修改您的按钮代码应为：

{ xtype:"button", id:"showme_BTN", cls:"home-round-btns", html:'<img src="resources/icons/show_me.svg">' },

Answer 2

基于ankit chaudhary

我知道你的意思，

但您应该删除cls中的基本按钮样式
不要将baseCls用于此
除此之外你可以使用addCls添加一个额外的CSS，它会覆盖你设置的baseCls

如果你真的必须这样做，你需要：

var btn = Ext.Viewport.down('#showme_BTN');
btn.element.dom.classList.remove('home-round-btns');
btn.element.dom.classList.add('home-round-btns-red');

进一步改进：

不要使用id，而是使用itemId
使用down / up而不是getCmp
限制使用getCmp / down / up并使用变量

Sencha Touch，AddCls到按钮不起作用

2 个答案: