ExtJS基于颜色选择器动态改变按钮背景颜色

Question

我有一个 Sencha ExtJS 应用程序，用户在其中输入一些数据到输入表单中，然后选择与该项目关联的颜色。在他们单击表单中的保存按钮后，表单将关闭并为新项目创建一个按钮。我基本上是想弄清楚如何更改按钮的背景颜色以对应于用户选择的内容。我进行了大量搜索，发现大多数是通过 CSS 并设置 cls 属性来完成的。如果我在颜色选择器中为每种颜色在 css 文件中创建一行，那会很好，但是当颜色不知道时，必须有一种方法来动态设置按钮背景颜色。

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

Answer 1

每个颜色都有一个班级有点不合理！您应该能够使用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

Answer 2

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