ColorField (color picker form field)

**bendy** · 20 Apr 2007 2:33 PM

Whipped this thing up for one of my projects and thought I would post the code here in case anyone else finds it useful. It is an Ext.form.ColorField that allows you to choose a color from the menu or enter it manually.

I followed the DateField as an example when making this. It is not perfect but it works for me. You may have to adjust the image paths depending on where you put things.

Code:

/**
 * @class Ext.form.ColorField
 * @extends Ext.form.TriggerField
 * Provides a very simple color form field with a ColorMenu dropdown.
 * Values are stored as a six-character hex value without the '#'.
 * I.e. 'ffffff'
 * @constructor
 * Create a new ColorField
 * <br />Example:
 * <pre><code>
var cf = new Ext.form.ColorField({
	fieldLabel: 'Color',
	hiddenName:'pref_sales',
	showHexValue:true
});
</code></pre>
 * @param {Object} config
 */
Ext.form.ColorField = function(config){
    Ext.form.ColorField.superclass.constructor.call(this, config);
	this.on('render', this.handleRender);
};

Ext.extend(Ext.form.ColorField, Ext.form.TriggerField,  {
    /**
     * @cfg {Boolean} showHexValue
     * True to display the HTML Hexidecimal Color Value in the field
     * so it is manually editable.
     */
    showHexValue : false,
	
	/**
     * @cfg {String} triggerClass
     * An additional CSS class used to style the trigger button.  The trigger will always get the
     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-color-trigger'
     * which displays a calendar icon).
     */
    triggerClass : 'x-form-color-trigger',
	
    /**
     * @cfg {String/Object} autoCreate
     * A DomHelper element spec, or true for a default element spec (defaults to
     * {tag: "input", type: "text", size: "10", autocomplete: "off"})
     */
    // private
    defaultAutoCreate : {tag: "input", type: "text", size: "10",
						 autocomplete: "off", maxlength:"6"},
	
	/**
	 * @cfg {String} lengthText
	 * A string to be displayed when the length of the input field is
	 * not 3 or 6, i.e. 'fff' or 'ffccff'.
	 */
	lengthText: "Color hex values must be either 3 or 6 characters.",
	
	//text to use if blank and allowBlank is false
	blankText: "Must have a hexidecimal value in the format ABCDEF.",
	
	/**
	 * @cfg {String} color
	 * A string hex value to be used as the default color.  Defaults
	 * to 'FFFFFF' (white).
	 */
	defaultColor: 'FFFFFF',
	
	maskRe: /[a-f0-9]/i,
	// These regexes limit input and validation to hex values
	regex: /[a-f0-9]/i,

	//private
	curColor: 'ffffff',
	
    // private
    validateValue : function(value){
		if(!this.showHexValue) {
			return true;
		}
		if(value.length<1) {
			this.el.setStyle({
				'background-color':'#' + this.defaultColor
			});
			if(!this.allowBlank) {
				this.markInvalid(String.format(this.blankText, value));
				return false
			}
			return true;
		}
		if(value.length!=3 && value.length!=6 ) {
			this.markInvalid(String.format(this.lengthText, value));
			return false;
		}
		this.setColor(value);
        return true;
    },

    // private
    validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },
	
	// Manually apply the invalid line image since the background
	// was previously cleared so the color would show through.
	markInvalid : function( msg ) {
		Ext.form.ColorField.superclass.markInvalid.call(this, msg);
		this.el.setStyle({
			'background-image': 'url(../lib/resources/images/default/grid/invalid_line.gif)'
		});
	},

    /**
     * Returns the current color value of the color field
     * @return {String} value The hexidecimal color value
     */
    getValue : function(){
		return this.curValue || this.defaultValue || "FFFFFF";
    },

    /**
     * Sets the value of the color field.  Format as hex value 'FFFFFF'
     * without the '#'.
     * @param {String} hex The color value
     */
    setValue : function(hex){
		Ext.form.ColorField.superclass.setValue.call(this, hex);
		this.setColor(hex);
    },
	
	/**
	 * Sets the current color and changes the background.
	 * Does *not* change the value of the field.
	 * @param {String} hex The color value.
	 */
	setColor : function(hex) {
		this.curColor = hex;
		
		this.el.setStyle( {
			'background-color': '#' + hex,
			'background-image': 'none'
		});
		if(!this.showHexValue) {
			this.el.setStyle({
				'text-indent': '-100px'
			});
			if(Ext.isIE) {
				this.el.setStyle({
					'margin-left': '100px'
				});
			}
		}
	},
	
	handleRender: function() {
		this.setDefaultColor();
	},
	
	setDefaultColor : function() {
		this.setValue(this.defaultColor);
	},

    // private
    menuListeners : {
        select: function(m, d){
            this.setValue(d);
        },
        show : function(){ // retain focus styling
            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);
        }
    },
	
	//private
	handleSelect : function(palette, selColor) {
		this.setValue(selColor);
	},

    // private
    // Implements the default empty TriggerField.onTriggerClick function to display the ColorPicker
    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.ColorMenu();
			this.menu.palette.on('select', this.handleSelect, this );
        }
        this.menu.on(Ext.apply({}, this.menuListeners, {
            scope:this
        }));
        this.menu.show(this.el, "tl-bl?");
    }
});

And the CSS:

Code:

.x-form-field-wrap .x-form-color-trigger {
	background:transparent url(img/color-trigger.gif) no-repeat 0 0;
    cursor:pointer; 
}

I have attached the icon but it could probably be replaced with something better.

Hope someone finds this useful!

**alien3d** · 20 Apr 2007 5:16 PM

very liked it

Hope jack put this code up to ext-all.js

**bendy** · 23 Apr 2007 8:03 AM

Glad you liked it.. Let me know if you find any bugs or have a feature request.

**Nullity** · 23 Apr 2007 11:30 AM

Wow, I actually just implemented this feature myself last week, but I wanted to add a little more to it before I posted it here. I hope you don't mind, I "borrowed" your small regex as I forgot to add that

. Here is my code (there is still more I want to do with it, but it works as-is):

Code:

/**
 * @class Ext.form.ColorField
 * @extends Ext.form.TriggerField
 * Provides a color input field with a {@link Ext.ColorPalette} dropdown.
* @constructor
* Create a new ColorField
 * <br />Example:
 * <pre><code>
var color_field = new Ext.form.ColorField({
	fieldLabel: 'Color',
	id: 'color',
	width: 175,
	allowBlank: false
});
</code></pre>
* @param {Object} config
 */
Ext.form.ColorField = function(config){
    Ext.form.ColorField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.ColorField, Ext.form.TriggerField,  {
    /**
     * @cfg {String} invalidText
     * The error to display when the color in the field is invalid (defaults to
     * '{value} is not a valid color - it must be in the format {format}').
     */
    invalidText : "{0} is not a valid color - it must be in a the hex format {1}",
    /**
     * @cfg {String} triggerClass
     * An additional CSS class used to style the trigger button.  The trigger will always get the
     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-color-trigger'
     * which displays a color wheel icon).
     */
    triggerClass : 'x-form-color-trigger',
    /**
     * @cfg {String/Object} autoCreate
     * A DomHelper element spec, or true for a default element spec (defaults to
     * {tag: "input", type: "text", size: "10", autocomplete: "off"})
     */

    // private
    defaultAutoCreate : {tag: "input", type: "text", size: "10", maxlength: "7", autocomplete: "off"},

    // Limit input to hex values
    maskRe: /[a-f0-9]/i,
    regex: /[a-f0-9]/i,

    // private
    validateValue : function(value){
        if(!Ext.form.ColorField.superclass.validateValue.call(this, value)){
            return false;
        }
        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
             return true;
        }

        var parseOK = this.parseColor(value);

        if(!value || (parseOK == false)){
            this.markInvalid(String.format(this.invalidText, value, '#AABBCC'));
            return false;
        }

        return true;
    },

    // private
    // Provides logic to override the default TriggerField.validateBlur which just returns true
    validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },

    /**
     * Returns the current value of the color field
     * @return {String} value The color value
     */
    getValue : function(){
        return Ext.form.ColorField.superclass.getValue.call(this) || "";
    },

    /**
     * Sets the value of the color field.  You can pass a string that can be parsed into a valid HTML color
     * <br />Usage:
     * <pre><code>
		colorField.setValue('#FFFFFF');
       </code></pre>
     * @param {String} color The color string
     */
    setValue : function(color){
        Ext.form.ColorField.superclass.setValue.call(this, this.formatColor(color));
    },

    // private
    parseColor : function(value){
	return (!value || (value.substring(0,1) != '#')) ?
		false : true;
    },

    // private
    formatColor : function(value){
	if (value && (this.parseColor(value) == false)) {
		value = '#' + value;
	}

        return value;
    },

    // private
    menuListeners : {
        select: function(e, c){
            this.setValue(c);
        },
        show : function(){ // retain focus styling
            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);
        }
    },

    // private
    // Implements the default empty TriggerField.onTriggerClick function to display the ColorPalette
    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.ColorMenu();
        }

        this.menu.on(Ext.apply({}, this.menuListeners, {
            scope:this
        }));

        this.menu.show(this.el, "tl-bl?");
    }
});

Also, I attached the icon that I made and a sample image.

**bendy** · 23 Apr 2007 11:49 AM

Looks great Nullity! Feel free to use whatever code you want. I don't need to extend this any further for my project but it is great to see someone else continuing the same thing.

**hemper** · 24 Apr 2007 12:01 PM

I add formula which extract foreground color from background..

Code:

        if (!this.validateColor(color)){
            return false;
        }
            
        var fgColor = this.defaultFgColorl,
            bgColorBr = this.hex2rgb(color);
        fgColor = ((bgColorBr.R * 299) + (bgColorBr.G * 587) + (bgColorBr.B * 114)) / 1000 - 125 < 0 ? "#FFF" : "#000"; 
        
        this.el.setStyle({
            'background-color': color,
            'background-image': 'none',
            'color' : fgColor
        });

Code:

// private
    hex2dec: function(hexchar) {
        return "0123456789ABCDEF".indexOf(hexchar.toUpperCase());
    },
    // private
    hex2rgb: function(color) { 
        color = color.replace("#", "");
        return {
            R : (this.hex2dec(color.substr(0, 1)) * 16) + this.hex2dec(color.substr(1, 1)),
            G : (this.hex2dec(color.substr(2, 1)) * 16) + this.hex2dec(color.substr(3, 1)),
            B : (this.hex2dec(color.substr(4, 1)) * 16) + this.hex2dec(color.substr(5, 1))
        }
    }

**manog** · 24 Feb 2012 5:12 AM

I am using ext js 3.4 in web application 
I have download color picker extension from 
<a href="showthread.php?73998-3.x-Ext.ux.ColorPickerField.It" target="_blank">http://www.sencha.com/forum/showthre...PickerField.It</a>
is working fine if i am put in panel,but it is not working properly in
editable grid panel.In editable grid panel selected value not getting
after choose the color from color picker,it is show default value(FFFFFF) for all
selection. I can use lot of column in editable grid panel. I put color picker in one column of editable grid panel.I am not getting selected value if i can click another column of grid panel after select the color from color picker. 
 
So please anybody reply me , 
 
Thanks

**youss.imzourh** · 12 May 2012 9:39 AM

Hi,

Thanks for this useful ux.

Here is a set of colors commonly used in Web :

"000000", "333333", "666666", "999999", "CCCCCC", "FFFFFF", "00CC00", "00CC33", "33CC00", "33CC33", "66CC00", "66CC33", "00CC66", "33CC66", "00FF00", "00FF33", "00FF66", "33FF00", "66FF00", "33FF33", "33FF66", "66FF33", "66FF66", "99FF00", "99FF33", "99FF66", "99FF99", "CCFF66", "99CC00", "CCFF99", "99CC66", "669933", "339933", "009933", "339900", "007326", "336600", "336633", "003300", "006633", "009966", "339966", "669966", "66CC66", "66CC99", "33CC99", "99CC99", "00FF99", "33FF99", "CCFFCC", "99FFCC", "66FFCC", "99FFFF", "66FFFF", "00FFFF", "33FFFF", "33FFCC", "00FFCC", "33CCCC", "00CCCC", "66CCCC", "00CC99", "339999", "009999", "006666", "FFFF66", "FFFF33", "FFFF00", "FFFF99", "FF9966", "FFCC00", "CCCC66", "CCCC33", "CCCC00", "999933", "999900", "999966", "666633", "666600", "333300", "663300", "996633", "996600", "CC9933", "FFCC66", "FFCC99", "FF9933", "FF9900", "FF6600", "CC9966", "000033", "000066", "003366", "333366", "003399", "333399", "3300CC", "0033CC", "006699", "0000FF", "3300FF", "3333FF", "0033FF", "0066FF", "3366FF", "0066CC", "666699", "3366CC", "6666FF", "336699", "0099CC", "6699CC", "3399CC", "0099FF", "6699FF", "3399FF", "00CCFF", "33CCFF", "66CCFF", "99CCFF", "CCFFFF", "99CCCC", "669999", "336666", "003333", "330066", "330099", "6600CC", "6600FF", "6633CC", "6633FF", "CCCCFF", "660099", "660066", "663399", "9900CC", "993399", "9933CC", "9900FF", "9933FF", "996699", "9966CC", "9966FF", "663366", "CC00FF", "CC66CC", "CC99FF", "CC33FF", "CC66FF", "FF99FF", "330033", "660033", "990066", "CC0099", "CC3399", "CC6699", "FF0099", "FF3399", "FF33CC", "FF00CC", "FF33FF", "FF00FF", "FF66CC", "FF99CC", "FFCCFF", "660000", "990033", "990000", "993333", "CC3333", "CC6666", "CC6633", "CC6600", "CC3300", "993300", "663333", "FF0066", "FF3366", "FF6666", "FF6699", "FF9999", "FFCCCC", "330000", "CC9999", "FF6633", "FF3300", "FF0033", "FF3333", "FF0000", "CC3366", "CC0066", "CC0033"

See you.

**brookd** · 18 Mar 2008 5:35 PM

Any idea why I might see an empty colormenu when I try to run this code? This only happens when using the code as a gridEditor / cellEditor:

new Ext.grid.GridEditor(new Ext.ux.ColorField({fieldLabel: 'Color',id: 'color',width: 175,allowBlank: false}))

**extJS_learner** · 20 Mar 2008 12:04 AM

Seems to work well. Thanks for your efforts. One question, how might I attach catch the event of a new color being selected?

ColorField (color picker form field)

Thread Tools

Search Thread

Display

Hybrid View

ColorField (color picker form field)

ColorField (color picker form field)

i tested

i tested

extract foreground color from background..

extract foreground color from background..

ColorPicker is empty?

ColorPicker is empty?

attaching listener

attaching listener