Sencha Touch, AddCls к кнопке не работает

Question

Я знаю, что большинство пользователей спрашивают об этом, Но я не могу понять, что это правильно. У меня есть кнопка, которая должна изменить цвет при инициализации(). вот пример одного.

  { 
       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 функция Добавляет класс CSS к элементу верхнего уровня, представляющий этот компонент. Он не добавит класс в baseCls, он добавит класс в cls.

EDIT Ваш код кнопки должно быть:

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

Answer 2

на основе ANKIT Чаудхари

Я знаю, что вы имеете в виду,

• но вы должны удалить базовую кнопку стиль внутри ваш cls
• не использовать baseCls для этого
• кроме того, что вы могли бы просто добавить дополнительные CSS с помощью addCls, который переписывает 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'); 

Дальнейшие усовершенствования:

• не использовать идентификатор, но Itemid
• использовать вниз/вверх вместо getCmp
• ограничивает использование getCmp/down/up и вместо этого использует переменную