Ext.ux.form.ColorPaletteField

[Izhaki]

A trigger form field that shows EXT's ColorPalette upon click.

Ext.ux.form.ColorPaletteField = Ext.extend(Ext.form.TriggerField, {
    triggerClass : 'x-form-color-trigger',

    colors : [
        '000000', '222222', '444444', '666666', '999999', 'BBBBBB', 'DDDDDD', 'FFFFFF',
        '660000', '663300', '996633', '003300', '003399', '000066', '330066', '660066',
        '990000', '993300', 'CC9900', '006600', '0033FF', '000099', '660099', '990066',
        'CC0000', 'CC3300', 'FFCC00', '009900', '0066FF', '0000CC', '663399', 'CC0099',
        'FF0000', 'FF3300', 'FFFF00', '00CC00', '0099FF', '0000FF', '9900CC', 'FF0099',        
        'CC3333', 'FF6600', 'FFFF33', '00FF00', '00CCFF', '3366FF', '9933FF', 'FF00FF',
        'FF6666', 'FF6633', 'FFFF66', '66FF66', '00FFFF', '3399FF', '9966FF', 'FF66FF',
        'FF9999', 'FF9966', 'FFFF99', '99FF99', '99FFFF', '66CCFF', '9999FF', 'FF99FF',
        'FFCCCC', 'FFCC99', 'FFFFCC', 'CCFFCC', 'CCFFFF', '99CCFF', 'CCCCFF', 'FFCCFF',                         
    ],

    
    // whether or not the field background, text, or triggerbackgroud are set to the selected color
    colorizeFieldBackgroud: true,
    colorizeFieldText: true,
    colorizeTrigger: false,
    
    // by default don't let user enter its own string value
    editable: false,

    initComponent : function(){
        Ext.ux.form.ColorPaletteField.superclass.initComponent.call(this);

        this.addEvents(            
            'select'
        );
    },

    // private
    validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },

    setValue : function(color){
        if (this.colorizeFieldBackgroud) this.el.applyStyles('background: #' + color  + ';');
        if (this.colorizeFieldText) this.el.applyStyles('color: #' + color  + ';');
        if (this.colorizeTrigger) this.trigger.applyStyles('background-color: #' + color  + ';');        
        return Ext.ux.form.ColorPaletteField.superclass.setValue.call(this, color);        
    },

    // private
    onDestroy : function(){
        Ext.destroy(this.menu);
        Ext.ux.form.ColorPaletteField.superclass.onDestroy.call(this);
    },
    
    // private
    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.ColorMenu({
                hideOnClick: false
            });
        }
        this.onFocus();
        
        Ext.apply(this.menu.palette,  {
            colors : this.colors,
        });        
        
        this.menu.show(this.el, "tl-bl?");
        if (this.menu.palette.el.child("a.color-" + this.getValue())) // only select the color if part of the paletter
          this.menu.palette.select(this.getValue());        
        this.menuEvents('on');
    },
    
    //private
    menuEvents: function(method){
        this.menu[method]('select', this.onSelect, this);
        this.menu[method]('hide', this.onMenuHide, this);
        this.menu[method]('show', this.onFocus, this);
    },
    
    onSelect: function(m, d){
        this.setValue(d);
        this.fireEvent('select', this, d);
        this.menu.hide();
    },
    
    onMenuHide: function(){
        this.focus(false, 60);
        this.menuEvents('un');
    },
    
});

Ext.reg('colorpaletteField', Ext.ux.form.ColorPaletteField);

[wemerson.januario]

nice work

[pawajee]

I tried the code above it's not working. I removed 2 syntax errors. then it was working but the trigger image is not changed.

[Izhaki]

A Fix:

Ext.namespace('Ext.ux.form');

Ext.ux.form.ColorPaletteField = Ext.extend(Ext.form.TriggerField, {
    triggerClass : 'x-form-color-trigger',

    colors : [
        '000000', '222222', '444444', '666666', '999999', 'BBBBBB', 'DDDDDD', 'FFFFFF',
        '660000', '663300', '996633', '003300', '003399', '000066', '330066', '660066',
        '990000', '993300', 'CC9900', '006600', '0033FF', '000099', '660099', '990066',
        'CC0000', 'CC3300', 'FFCC00', '009900', '0066FF', '0000CC', '663399', 'CC0099',
        'FF0000', 'FF3300', 'FFFF00', '00CC00', '0099FF', '0000FF', '9900CC', 'FF0099',        
        'CC3333', 'FF6600', 'FFFF33', '00FF00', '00CCFF', '3366FF', '9933FF', 'FF00FF',
        'FF6666', 'FF6633', 'FFFF66', '66FF66', '00FFFF', '3399FF', '9966FF', 'FF66FF',
        'FF9999', 'FF9966', 'FFFF99', '99FF99', '99FFFF', '66CCFF', '9999FF', 'FF99FF',
        'FFCCCC', 'FFCC99', 'FFFFCC', 'CCFFCC', 'CCFFFF', '99CCFF', 'CCCCFF', 'FFCCFF',                         
    ],

    
    // whether or not the field background, text, or triggerbackgroud are set to the selected color
    colorizeFieldBackgroud: true,
    colorizeFieldText: true,
    colorizeTrigger: false,
    
    // by default don't let user enter its own string value
    editable: false,

    initComponent : function(){
        Ext.ux.form.ColorPaletteField.superclass.initComponent.call(this);

        this.addEvents(            
            'select'
        );
    },

    // private
    validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },
    
    onRender : function(ct, position){
        Ext.ux.form.ColorPaletteField.superclass.onRender.call(this, ct, position);
        this.updateColor();        
    },
    
    updateColor : function(){
      if (this.colorizeFieldBackgroud & this.el) this.el.applyStyles('background: #' + this.color  + ';');
      if (this.colorizeFieldText & this.el) this.el.applyStyles('color: #' + this.color  + ';');
      if (this.colorizeTrigger) this.trigger.applyStyles('background-color: #' + this.color  + ';');        
    },

    setValue : function(color){
        this.color = color;
        this.updateColor();
        return Ext.ux.form.ColorPaletteField.superclass.setValue.call(this, color);        
    },

    // private
    onDestroy : function(){
        Ext.destroy(this.menu);
        Ext.ux.form.ColorPaletteField.superclass.onDestroy.call(this);
    },
    
    // private
    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.ColorMenu({
                hideOnClick: false
            });
        }
        this.onFocus();
        
        Ext.apply(this.menu.palette,  {
            colors : this.colors,
        });        
        
        this.menu.show(this.el, "tl-bl?");
        if (this.menu.palette.el.child("a.color-" + this.getValue())) // only select the color if part of the paletter
          this.menu.palette.select(this.getValue());        
        this.menuEvents('on');
    },
    
    //private
    menuEvents: function(method){
        this.menu[method]('select', this.onSelect, this);
        this.menu[method]('hide', this.onMenuHide, this);
        this.menu[method]('show', this.onFocus, this);
    },
    
    onSelect: function(m, d){
        this.setValue(d);
        this.fireEvent('select', this, d);
        this.menu.hide();
    },
    
    onMenuHide: function(){
        this.focus(false, 60);
        this.menuEvents('un');
    },
    
});

Ext.reg('colorpaletteField', Ext.ux.form.ColorPaletteField);

[reanvdm]

One small update on the code above, I found I needed to use && :

if (this.colorizeFieldBackgroud && this.el)

Also added a block of code to alternate text color if background is dark/light:

    updateColor : function(){
      if (this.colorizeFieldBackgroud && this.el)  this.el.applyStyles('background: #' + this.color  + ';');
      if (this.colorizeFieldText && this.el)  this.el.applyStyles('color: #' + this.color  + ';');
      else if(this.el && this.color) this.el.applyStyles('color:  #' + this.idealTextColor(this.color)  + ';');
      if (this.colorizeTrigger)  this.trigger.applyStyles('background-color: #' + this.color  +  ';');        
    },
    
    idealTextColor : function(bgColor) {
       var nThreshold = 105;
       var components = this.getRGBComponents(bgColor);
       var bgDelta = (components.R * 0.299) + (components.G * 0.587) +  (components.B * 0.114);
       return ((255 - bgDelta) < nThreshold) ? "000000" : "ffffff";    
    },
    
    getRGBComponents : function(color) {       
        var r = color.substring(1, 3);
        var g = color.substring(3, 5);
        var b = color.substring(5, 7);
    
        return {
           R: parseInt(r, 16),
           G: parseInt(g, 16),
           B: parseInt(b, 16)
        };
    },

which assumes of course that

    colorizeFieldBackgroud: true,
    colorizeFieldText: false,
    colorizeTrigger: false,

[Ronhead]

ive a problem with IE, the first img is from FF and show complete palette2FF.JPG
palette1IE.JPGthe second image is from IE8 and dont show all

how can i fix this error?
thanks