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