Extjs 6.0 颜色选择器十六进制字段

Extjs 6.0 colorpicker HEX field

本文关键字：十六进制 字段 选择器 颜色 Extjs      更新时间：2023-09-26

我正在使用ExtJS颜色选择器为我的网站设置颜色。但是，我已经使用了我想要的某些特定颜色代码。但是当我加载颜色选择器时，我无法输入自己的颜色代码。有谁知道如何使该字段可编辑？提前谢谢。

截至目前，十六进制字段无法解析十六进制值并将其正确设置到选取器的所有其他字段中 - 这就是该字段设置为 readOnly 的原因。

您始终可以阅读、理解和覆盖/扩展现有代码以满足您的需求。

如果您通过 setValue() 提供十六进制颜色代码

，该字段已经正确解析了十六进制颜色代码，因此您只需按照该路径找到可以挂钩的解析函数。

我想这不超过四个小时的工作，包括测试。

正在努力解决 sencha 未实现此功能的相同问题。做了以下工作：

// hex2rgb is missing in sencha so i created a new one
Ext.define('MyAppOverrides.ColorUtils', {
    override   :   'Ext.ux.colorpick.ColorUtils'
    , hex2rgb :   function(hex){
        var result = /^#?([a-f'd]{2})([a-f'd]{2})([a-f'd]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }
});
// When you type the Hex value might not be valid so we have to check first if we get rgb values. If so we just call the parent/original function
Ext.define('MyAppOverrides.SelectorModel', {
    override    :   'Ext.ux.colorpick.SelectorModel'
    , changeRGB: function (rgb) {
        if(rgb){
            this.callParent(arguments);
        }
    }
}); 

// Was extending the current Ext.ux.colorpick.ColorUtils and made the field writable
var hexField = me.down('textfield[fieldLabel=HEX]');
if(hexField){
      hexField.setReadOnly(false);
}
相关文章：