ExtJS根据颜色选择器动态更改按钮背景颜色

Question

我有一个Sencha ExtJS应用程序，用户在输入表单中输入一些数据，然后选择与该项相关联的颜色。在他们单击表单中的保存按钮后，表单将关闭并为新项目创建一个按钮。我基本上试图弄清楚如何更改按钮的背景颜色以对应用户选择的颜色。我已经做了很多搜索，并发现大多数人通过CSS和设置cls属性来完成此操作。如果我为颜色选择器中的每种颜色创建了css文件中的一行，那就没问题了，但是当颜色事先不知道时，必须有一种动态设置按钮背景颜色的方法。

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

- Josh

Answer 1

从你的颜色选择器创建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;

- Mouhcine

Answer 2

每一种颜色都对应一个类有点不太合理！你应该能够使用style属性手动设置样式。只需将十六进制字符串替换为您的变量即可。

{
    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

请注意：此链接提供有关设置ExtJs组件样式的信息。

- Lesley.Oakey

---

这个很好地运作。而且我可以动态地在运行时更改样式。 - happyyangyuan

Answer 3

你尝试过使用已定义的removeCls和addCls方法来改变按钮的颜色吗？

使用removeCls方法删除现有的CSS（如果有），然后在另一个CSS类中设置所需的背景颜色，并使用addCls方法将该CSS类添加到按钮中。

- Rini Rachel