ExtJS Dynamicically Change Button Цвет фона на основе набора цветов

Question

У меня есть приложение Sencha ExtJS, в котором пользователь вводит некоторые данные в форму ввода, а затем выбирает цвет, связанный с этим элементом. После нажатия кнопки сохранения в форме форма закрывается и создает кнопку для нового элемента. Я в основном пытаюсь понять, как изменить цвет фона кнопки, чтобы соответствовать тому, что выбирает пользователь. Я сделал кучу поиска и нашел, что большинство делают это с помощью CSS и устанавливают свойство cls. Это было бы хорошо, если бы я упаковал строку в файле css для каждого цвета в подборщике цветов, но должен быть способ динамически установить цвет фона кнопки, когда цвет не знает заранее.

layoutRoot.down('#pnlTest').add({ xtype: 'button', text: obj.name, height: 25, width: 125, margin: '5', }); 

Answer 1

Вы попробовали removeCls, а затем метод addCls, определенный для кнопки, чтобы изменить цвет при необходимости?

Попробуйте метод removeCls, чтобы удалить существующий CSS, если таковой имеется, а затем установите фоновый цвет, который вы хотите использовать в другом классе CSS, и добавьте этот класс CSS к кнопке с помощью метода addCls.

Answer 2

Немного неразумно иметь класс за цвет! Вы должны иметь возможность вручную установить стиль, используя атрибут . Просто замените шестнадцатеричную строку вашей переменной.

{ 
    xtype: 'button', 
    text: obj.name, 
    height: 25, 
    width: 125, 
    margin: '5', 
    style: { 
     background: '#FF5566' 
    } 
} 

Соответствующие документы (документы предназначены для ExtJS версии 5.0, но эта функция была доступна с 1.1.0) http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Component-cfg-style

Answer 3

Создать RgB строки из вашего выбора цвета (синтаксис здесь может меняться в зависимости от того, как это подборщики возвращая цвет)
var rgb = [picker.r, picker.g, picker.b];
var string = 'rgb(' + rgb.join(',') + ')'

Получить кнопку с помощью его ID

var button = Ext.getCmp('Your_button_ID'); 

кнопку Изменить цвет

button.getEl().dom.style.background = string;