Simple Ext.ux.ColorField plugin

[slammer]

I decided to migrate this plugin http://www.sencha.com/learn/legacy/Extension:ColorField to ExtJS 4.

Ext.define('Ext.ux.ColorField', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.colorfield',    
    requires: ['Ext.form.field.VTypes', 'Ext.layout.component.field.Text'],

    lengthText: "Color hex values must be either 3 or 6 characters.",
    blankText: "Must have a hexidecimal value in the format ABCDEF.",
    
    regex: /^[0-9a-f]{3,6}$/i,
    
    validateValue : function(value){
        if(!this.getEl()) {
            return true;
        }
        if(value.length!=3 && value.length!=6) {
            this.markInvalid(Ext.String.format(this.lengthText, value));
            return false;
        }
        if((value.length < 1 && !this.allowBlank) || !this.regex.test(value)) {
            this.markInvalid(Ext.String.format(this.blankText, value));
            return false;
        }
        
        this.markInvalid();
        this.setColor(value);
        return true;
    },

    markInvalid : function( msg ) {
        Ext.ux.ColorField.superclass.markInvalid.call(this, msg);
        this.inputEl.setStyle({
            'background-image': 'url(../resources/themes/images/default/grid/invalid_line.gif)'
        });
    },
    
    setValue : function(hex){
        Ext.ux.ColorField.superclass.setValue.call(this, hex);
        this.setColor(hex);
    },
    
    setColor : function(hex) {
        Ext.ux.ColorField.superclass.setFieldStyle.call(this, {
            'background-color': '#' + hex,
            'background-image': 'none'
        });
    },

    menuListeners : {
        select: function(m, d){
            this.setValue(d);
        },
        show : function(){
            this.onFocus();
        },
        hide : function(){
            this.focus();
            var ml = this.menuListeners;
            this.menu.un("select", ml.select,  this);
            this.menu.un("show", ml.show,  this);
            this.menu.un("hide", ml.hide,  this);
        }
    },
    
    onTriggerClick : function(e){
        if(this.disabled){
            return;
        }
        
        this.menu = new Ext.menu.ColorPicker({
            shadow: true,
            autoShow : true
        });
        this.menu.alignTo(this.inputEl, 'tl-bl?');
        this.menu.doLayout();
        
        this.menu.on(Ext.apply({}, this.menuListeners, {
            scope:this
        }));
        
        this.menu.show(this.inputEl);
    }
});

[SenchaGuru]

Thank you, .. this is exactly what I was trying to do, ..

Maybe someone should update the plugin page, .. this would've saved me hours trying to get that to work

Excelent work

[janhov]

Thanks a lot! I find this component very useful.

[Izhaki]

Thanks a lot for sharing.

Shouldn't it be:

    validateValue : function(value){


        if (this.allowBlank && !value)
        {
            return true
        }


        if(!this.getEl()) {
            return true;
        }
        if(value.length!=3 && value.length!=6) {
            this.markInvalid(Ext.String.format(this.lengthText, value));
            return false;
        }
        if((value.length < 1 && !this.allowBlank) || !this.regex.test(value)) {
            this.markInvalid(Ext.String.format(this.blankText, value));
            return false;
        }


        return true;
    },

[apriza_ymail]

cann't run in ie.. i am using ie 8

[lastcrown]

on setColor, remove '#'

[before]
background-color': '#' + hex,

[after]
'background-color': hex,