Question

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

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

Answer 1

每种颜色的课程有点不合理！您应该能够使用样式属性手动设置样式。只需用变量替换十六进制字符串。

{
    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;

Answer 3

您是否尝试使用removeCls，然后为按钮定义addCls方法以在需要时更改颜色？

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

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

3 个答案: