Sencha Touch，AddCls 到按钮不起作用答案

【问题标题】：Sencha Touch , AddCls to a button not workingSencha Touch，AddCls 到按钮不起作用
【发布时间】：2016-03-29 11:29:59
【问题描述】：

我知道大多数用户都问过这个问题，但我似乎无法正确回答。我有需要在 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
        }
    }

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

【问题讨论】：

这与 Phonegap Build 有什么关系？请将该信息添加到您的帖子中。

标签： css extjs sencha-touch phonegap-build

【解决方案1】：

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

编辑您的按钮代码应为：

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

【讨论】：

感谢您的回复，我该如何解决这个问题。你能修改我的代码吗
这在我的情况下不起作用，因为 cls 不会覆盖按钮样式，只有 baseCls 会。我做了一个 hack 以按照我想要的方式工作，谢谢
它可以覆盖...使用 css。你能分享你的 css

【解决方案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 并改用变量

【讨论】：