ExtJS custom validator colorpicker

Question

I have the colorpicker in ExtJS that I'm using to select colors as backgrounds. However I want the user to be able to put in their own HEX codes. To make sure they don't put invalid HEX codes into the field, I wanted to validate that they had the right amount of characters.

The user is also able to input name colors like: black, red, 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;
}

As soon as I try to use the custom validator my colorpicker just dissapears. Can someone show me a more comprehensive guide to using validators? Thanks.

EDIT

My extended .js file on the Selector source code from ExtJS

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;

}

});

color picker does not allow to enter custom colors, are u using any custom component for this ? — JChap, Mar 18 '16 at 15:23
No, I altered some of the source code. I made a second class which extends on the original, and by changing the values in that second class it basicly overwrites the source code, changing what the colorpicker does. There are already functions in place to allow a person to enter custom colors, they're just locked away. — Sem Abraham, Mar 21 '16 at 09:23
It will be helpful if you share the source of that extended class. — JChap, Mar 21 '16 at 11:09
Just added the extend. Changed some names but it should be clear what's going on. I basicly took the function names that were already present in the source code and I've overridden existing variables in the file. — Sem Abraham, Mar 21 '16 at 11:53

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Based on Validating css color names here is how you can define validator for the hex field. I'm assuming you want hexField to be editable.

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

Thanks! This was useful. Now I just need to find a way to disable/enable the ''save'' button depending on whether or not the HEX color is valid or not. — Sem Abraham, Mar 21 '16 at 13:42

ExtJS custom validator colorpicker

1 Answers1