Sencha Touch，AddCls 到按钮不起作用

Posted 2023-03-07

【中文标题】Sencha Touch，AddCls 到按钮不起作用

【英文标题】：Sencha Touch , AddCls to a button not working

【发布时间】：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 有什么关系？请将该信息添加到您的帖子中。

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