Question

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

Answer 1

截至目前，HEX字段缺乏解析十六进制值并将其正确设置到选择器的所有其他字段的可能性 - 这就是字段设置为readOnly的原因。

您始终可以阅读，理解和覆盖/扩展the existing code以满足您的需求。

如果您通过setValue()提供十六进制颜色代码，则该字段已正确解析，因此您只需按照该路径查找可以挂钩的解析函数。

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

Answer 2

正与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);
}

Extjs 6.0 colorpicker HEX字段

2 个答案: