Hybrid View

  1. #1
    Ext User bendy's Avatar
    Join Date
    Mar 2007
    Posts
    18
    Vote Rating
    0
    bendy is on a distinguished road

      0  

    Default ColorField (color picker form field)

    ColorField (color picker form field)


    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!
    Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    218
    Vote Rating
    0
    alien3d is on a distinguished road

      0  

    Default i tested

    i tested


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

  3. #3
    Ext User bendy's Avatar
    Join Date
    Mar 2007
    Posts
    18
    Vote Rating
    0
    bendy is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    186
    Vote Rating
    0
    Nullity is on a distinguished road

      0  

    Default


    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.
    Attached Images

  5. #5
    Ext User bendy's Avatar
    Join Date
    Mar 2007
    Posts
    18
    Vote Rating
    0
    bendy is on a distinguished road

      0  

    Default


    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.
    Ben D.

  6. #6
    Ext User
    Join Date
    Apr 2007
    Posts
    2
    Vote Rating
    0
    hemper is on a distinguished road

      0  

    Default extract foreground color from background..

    extract foreground color from background..


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

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    25
    Vote Rating
    0
    manog is on a distinguished road

      0  

    Default


    I am using ext js 3.4 in web application<br>
    I have download color picker extension from<br>
    <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.<br>I can use lot of column in editable grid panel.<br>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. <br>
    <br>
    So please anybody reply me ,<br>
    <br>
    Thanks <br>
    <br>

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Location
    Poitiers, France
    Posts
    20
    Vote Rating
    3
    youss.imzourh is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
    brookd is on a distinguished road

      0  

    Default ColorPicker is empty?

    ColorPicker is empty?


    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}))
    Attached Images

  10. #10
    Ext User
    Join Date
    Jan 2008
    Posts
    2
    Vote Rating
    0
    extJS_learner is on a distinguished road

      0  

    Default attaching listener

    attaching listener


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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar