1. #1
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default Ext.ux.form.ColorPaletteField

    Ext.ux.form.ColorPaletteField


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

    Code:
    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);
    Attached Images

  2. #2
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, GoiĆ¢nia
    Posts
    442
    Vote Rating
    7
    wemerson.januario will become famous soon enough

      0  

    Default


    nice work

  3. #3
    Ext User
    Join Date
    Mar 2010
    Posts
    1
    Vote Rating
    0
    pawajee is on a distinguished road

      0  

    Default Code is not working.

    Code is not working.


    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.

  4. #4
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default


    A Fix:

    Code:
    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);

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    reanvdm is on a distinguished road

      0  

    Default A few further ideas

    A few further ideas


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

    Code:
    if (this.colorizeFieldBackgroud && this.el)
    Also added a block of code to alternate text color if background is dark/light:

    Code:
        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
    Code:
        colorizeFieldBackgroud: true,
        colorizeFieldText: false,
        colorizeTrigger: false,

  6. #6
    Sencha User Ronhead's Avatar
    Join Date
    May 2008
    Location
    Santiasko,Chile
    Posts
    38
    Vote Rating
    0
    Ronhead is on a distinguished road

      0  

    Default


    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