1. #1
    Ext User
    Join Date
    Jun 2007
    Posts
    37
    Vote Rating
    0
    quilleashm is on a distinguished road

      0  

    Default ColorField

    ColorField


    Hi all,

    I needed a Ext js field for the ColorPalette. I cribbed the DateField and altered it to display a ColorPalette etc. It submits the six character string for the hex RGB value. It works but there is one major ugliness.

    It works by when the palette value is selected it changes the background colour of the input field (and also removes the background-image style). But I found that when a value is selected if you drag-select or double-click in the field the six character value becomes highlighted. I couldn't find a portable style for altering the highlight font/background colours. So I created a hidden field and moved the name of the main input field over.

    Any comments/improvements appreciated. Note I have not tested this in a Ext form, just applyTo() on a standalone input text field.

    Here's the code (LGPL).

    Code:
    Ext.form.ColorField = function(config){
        Ext.form.ColorField.superclass.constructor.call(this, config);
    };
    
    Ext.extend(Ext.form.ColorField, Ext.form.TriggerField,  {
        /**
         * @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-arrow-trigger'
         * which displays a calendar icon).
         */
        triggerClass : 'x-form-arrow-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"},
        
        readOnly : true,
        
        // private
        // Provides logic to override the default TriggerField.validateBlur which just returns true
        validateBlur : function(){
            return !this.menu || !this.menu.isVisible();
        },
    
        getValue : function(){
            return this.hiddenInput.dom.value;
        },
        
        setValue : function(colorString){
            this.el.setStyle( "background-image", "none" );
            this.el.setStyle( "background-color", "#" + colorString );
            this.el.setStyle( "color", "#" + colorString );
            this.hiddenInput.dom.value = colorString;
        },
    
        // private
        menuListeners : {
            select: function(m, colorString){
                this.setValue(colorString);
            },
            show : function(){ // retain focus styling
                this.onFocus();
            },
            hide : function(){
                this.focus.defer(10, this);
                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
            }));
    
            // select the initial value in the color palette
            if (this.getValue())
              this.menu.palette.value = this.getValue();
            
            this.menu.show(this.el, "tl-bl?");
        },
    
        onRender : function(ct, position){
            // on rendering creating a hidden input to hold the actual value as storing it in the main field
            // causes the 6-digit value to be shown if the user double clicks/selects the field content
            // there is no standard CSS style (that I can see) to set the highlight font/background color
            var inputName = this.el.dom.name;
            var inputValue = this.el.dom.value;
            this.el.dom.removeAttribute('name');
            this.el.dom.removeAttribute('value');
    
            this.hiddenInput = ct.createChild({tag: "input", type: "hidden", name: inputName});
            
            if (inputValue)
              this.setValue(inputValue);
    
            Ext.form.ColorField.superclass.onRender.call(this, ct, position);
    
        }
    });

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    mind putting this up as an Ext.ux @ Ext Community Extensions wiki?

  3. #3
    Ext User
    Join Date
    Jun 2007
    Posts
    37
    Vote Rating
    0
    quilleashm is on a distinguished road

      0  

    Default


    This is actually a dupe of

    http://extjs.com/forum/showthread.php?t=5106

    which looks better than my effort (custom icon and probably cleaner code).

Thread Participants: 1