Sencha Touch，将AddCls添加到按钮不起作用

Question

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

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

我的initialize function（），它在应用程序启动后立即运行。

   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函数将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，该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
• 使用向下/向上而不是getCmp
• 限制使用getCmp / down / up并使用变量