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

【问题标题】：ExtJS Dynamically Change Button Background Color Based on Color PickerExtJS基于颜色选择器动态改变按钮背景颜色
【发布时间】：2014-11-30 20:28:34
【问题描述】：

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

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

【问题讨论】：

标签： javascript css extjs

【解决方案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

【讨论】：

这很好用。我还可以动态更改样式。

【解决方案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;

【讨论】：

【解决方案3】：

您是否尝试过为按钮定义的 removeCls 和 addCls 方法，以便在需要时更改颜色？

尝试 removeCls 方法删除现有的 CSS（如果有），然后在不同的 css 类中设置您想要的背景颜色，并使用 addCls 方法将该 CSS 类添加到按钮。

【讨论】：