ExtJS 自定义验证器颜色选择器

Question

我在 ExtJS 中有颜色选择器，用于选择颜色作为背景。但是我希望用户能够输入他们自己的十六进制代码。为了确保他们不会在字段中输入无效的 HEX 代码，我想验证他们的字符数量是否正确。

用户还可以输入名称颜色，例如：黑色、红色、metalbrightblue。

The SenchaDocumentation on validators was.. Less than helpful.

validator: function (val) {
    // remove non-numeric characters
    var tn = val.replace(/[^0-9]/g,''),
        errMsg = "Must be a 10 digit telephone number";
    // if the numeric value is not 10 digits return an error message
    return (tn.length === 10) ? true : errMsg;
}

一旦我尝试使用自定义验证器，我的颜色选择器就会消失。有人可以向我展示使用验证器的更全面的指南吗？谢谢。

编辑

我在 ExtJS 的 Selector 源代码上的扩展 .js 文件

Ext.define('name.name.colorpick.Selector', {
extend: 'Ext.ux.colorpick.Selector',
xtype: 'xtype-xtype-colorpick-selector',

editable:false,

getSliderAndAField: function() {
    return [];
},

getMapAndHexRGBFields: function(){
    var me = this;
    var result = this.callParent(arguments);
    var hexField = result.items[1].items[0];
    hexField.disabled = true;
    hexField.listeners = {
        change: function(field,value){
            me.setValue(value);
        }
    };

    return result;
},

getSliderAndHField: function (){
    var me = this;
    var result = this.callParent(arguments);
    var hField = result.items[1];
    hField.disabled = true;

    return result;
},

getSliderAndSField: function (){
    var me = this;
    var result = this.callParent(arguments);
    var sField = result.items[1];
    sField.disabled = true;

    return result;

},

getSliderAndVField: function (){
    var me = this;
    var result = this.callParent(arguments);
    var vField = result.items[1];
    vField.disabled = true;

    return result;

}

});

Answer 1

基于Validating css color names，您可以在此处为十六进制字段定义验证器。我假设您希望 hexField 是可编辑的。

getMapAndHexRGBFields: function (childViewModel) {
        var me = this;
        var result = this.callParent(arguments);
        var hexField = result.items[1].items[0];
        hexField.readOnly = false;
        hexField.validator=  function (val) {
            var validateColor = function(stringToTest) {
                if (stringToTest === "") { 
                    return false; 
                }
                if (stringToTest === "inherit") { return false; }
                if (stringToTest === "transparent") { return false; }

                var image = document.createElement("img");
                image.style.color = "rgb(0, 0, 0)";
                image.style.color = stringToTest;
                if (image.style.color !== "rgb(0, 0, 0)") { return true; }
                image.style.color = "rgb(255, 255, 255)";
                image.style.color = stringToTest;
                return image.style.color !== "rgb(255, 255, 255)";
            };

            var isValid = validateColor(val);

            var errMsg = "Not a valid Color";
            return isValid ? true : errMsg;
        };
        hexField.listeners = {
            change: function(field, value){
                if(field.isValid()) {
                    me.setValue(value);
                }
            }
        };
        return result;
    }