Sencha Touch , AddCls to a button not working

Question

I know most users have asked this, But i cant seem to get it right. I have button that needs to change color on initialize() function. here is an example of one.

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

My initialize function(), this runs as soon as the app launches.

   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
        }
    }

You may ask why i want to do this, I want load personalized colors on different users, Thank You

Answer 1

addCls function Adds a CSS class to the top level element representing this component. It will not add the class in baseCls it will add class in cls .

EDIT Your button code should be:

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

Answer 2

based on ankit chaudhary

I know what you mean,

• but you should remove the base button styling inside your cls
• do not use baseCls for this
• other than that you could just add an additional CSS using addCls, which overwrites the baseCls you set

If you really have to go that way you need to:

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

Further improvements:

• do not use id, but itemId
• use down/up instead of getCmp
• limit the use of getCmp/down/up and use a variable instead