1. #21
    Ext User
    Join Date
    Oct 2007
    Posts
    10
    Vote Rating
    0
    BigBen4711 is on a distinguished road

      0  

    Default


    Hi,

    is this function correct ?

    PHP Code:
    getValue : function(){
            return 
    this.curValue || this.defaultValue || "FFFFFF";
        }, 
    Shouldn't it look like this?:

    PHP Code:
    getValue : function(){
            return 
    this.curColor || this.defaultValue || "FFFFFF";
        }, 
    cu,
    ben

  2. #22
    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

  3. #23
    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?

  4. #24
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    888
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by stever View Post
    This version deals with emptyText as a default color, and shows the color in the trigger.

    Thanks for this rev. works perfect for me. i only used the other gif (with the colorcircle) instead of the dropdown-array.gif deplyioed in the attachment zip.

    Thank you very much for sharing!

  5. #25
    Ext User
    Join Date
    May 2008
    Location
    Iasi, Romania
    Posts
    18
    Vote Rating
    0
    mephi is on a distinguished road

      0  

    Default


    How can use:
    Code:
    on.('select', function( params?){...});
    for colorField ?

    can you tell me if it`s possible ... I tried several code but with no success.

    thanks

  6. #26
    Banned
    Join Date
    Nov 2007
    Location
    Germany
    Posts
    101
    Vote Rating
    0
    junkzilla is on a distinguished road

      0  

    Default Register component

    Register component


    It's just a silly thing but...

    I think could be nice to add this line below:

    Code:
    Ext.reg('colorfield', Ext.form.ColorField);

  7. #27
    Ext User ovan's Avatar
    Join Date
    Oct 2007
    Posts
    33
    Vote Rating
    0
    ovan is on a distinguished road

      0  

    Default


    how to add the property "editable" to the code as the combobox has?
    ExtJS license owner

  8. #28
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default


    I improved this class a little bit. It now takes the value config property as the default value and you can override the default color palette by passing an array of colors.

    Eg.

    PHP Code:
    {
                  
    xtype:'colorfield',
                    
    fieldLabelGO.lang.color,
                    
    value:'EBF1E2',
                    
    name:'background',
                    
    colors:[
                        
    'EBF1E2',
                        
    '95C5D3',
                        
    'FFFF99',
                        
    'A68340',
                        
    '82BA80',
                        
    'F0AE67',
                    
    '66FF99',
                    
    'CC0099',
                    
    'CC99FF',
                    
    '996600',
                    
    '999900',
                    
    'FF0000',
                    
    'FF6600',
                    
    'FFFF00',
                    
    'FF9966',
                    
    'FF9900'                        
                    
    ]
                } 
    PHP Code:
    /**
     * Based on code found at http://extjs.com/forum/showthread.php?t=5106
     * 
     * Modified by Merijn Schering <mschering@intermesh.nl>
     * 
     * Changes: 
     *  -Handles value better. Uses value config property as start value. 
     *  -Removed changed trigger image because it didn't handle state.
     *     -Added colors config property so you can overide the default color palette * 
     * 
     * @class GO.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
     */


    GO.form.ColorField =  Ext.extend(function(config){
        
      
    this.menu = new Ext.menu.ColorMenu();
        
    this.menu.palette.on('select'this.handleSelectthis );

      
    this.menu.on(Ext.apply({}, this.menuListeners, {
          
    scope:this
      
    }));
      
      if(
    config.colors)
      {
          
    this.menu.palette.colors=config.colors;
      }
      
      
    GO.form.ColorField.superclass.constructor.call(thisconfig);
      
    },
    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 : 'go-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"1"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.blankTextvalue));
                    return 
    false
                
    }
                return 
    true;
            }
            if(
    value.length!=&& value.length!=) {
                
    this.markInvalid(String.format(this.lengthTextvalue));
                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 ) {
            
    GO.form.ColorField.superclass.markInvalid.call(thismsg);
            
    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){
            
    GO.form.ColorField.superclass.setValue.call(thishex);
            
    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'
                    
    });
                }
            }
        },

      
    // private
      
    menuListeners : {
          
    select: function(md){
              
    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(paletteselColor) {
            
    this.setValue(selColor);
        },

      
    // private
      // Implements the default empty TriggerField.onTriggerClick function to display the ColorPicker
      
    onTriggerClick : function(){
          if(
    this.disabled){
              return;
          }
          
          
    this.menu.show(this.el"tl-bl?");
      }
    });

    Ext.reg('colorfield'GO.form.ColorField); 
    Building Group-Office (http://www.group-office.com) with ExtJS: http://http://demo.group-office.eu user: demo / pass: demo

  9. #29
    Sencha User
    Join Date
    Aug 2007
    Posts
    174
    Vote Rating
    0
    piston is on a distinguished road

      0  

    Default


    I'd like to use this extension - which post has the most-updated js file? Is the original post up to date?

    **edit** nvm, http://extjs.com/learn/Extension:ColorField

  10. #30
    Ext User
    Join Date
    Oct 2008
    Posts
    13
    Vote Rating
    0
    hansi1985 is on a distinguished road

      0  

    Default


    hello i am a newbee! I need the colorpicker but it doesnt work!
    Can everbody post the HMTL-File??

    Thanks