Page 1 of 4 123 ... LastLast
Results 1 to 10 of 38

Thread: Ext.ux.form.ColorPickerFieldPlus

  1. #1
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    204

    Thumbs up Ext.ux.form.ColorPickerFieldPlus

    Ext.ux.form.ColorPickerFieldPlus

    This class makes Ext.ux.ColorPicker and Ext.ux.form.ColorPickerField available as a form field.

    Licence: IYUIYBMAC (If you use it, you buy me a Coke!)

    DEMO

    SVN Link

    See Ext.ux.MultiColorPicker too.

    Tested in:
    • Firefox 3.0.8
    • Internet Explorer 7.0.x
    • Chrome 1.0.x
    • Safari 4.x
    • Opera 9.64
    CHANGELOG (dd/mm/yy):
    • 22/04/09 - Fixed manually type color function.
    • 17/04/09 - Added reset function.
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by garraS; 25 May 2009 at 12:13 PM. Reason: Updated: Fixed manually type color function.

  2. #2
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,408

    Default

    Hey, that looks nice! I have a similar one, but I like your other color picker better than the one I'm using. I think I'll try and mix yours in and publish it. Will send you a beer (or coke) if I do!

  3. #3
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166

    Default

    Hi,

    Buen trabajo Garras!!.

    One thing: In a form the selected color is not assign to a field.

    In my opinion:

    1) "Accept" button is missing.

    2) I would use the standar css for slider and others. This reduce the size of the ux and will make posible include / best adapt your ux in future revisions of Ext.

    Greeintgs,

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710

    Default

    I just had a need for this today and looked here and saw that it was just posted! Works great thanks a ton!

    One question though...under a normal form.reset(), the background color of the color-picker-field-plus does not reset itself to white like it was before the field was populated. The field hex value is cleared but the color remains the same. Anyway you can make this work? Or, is there an API to the component that I could use to clear the background color?

    And I have one suggestion...I would not change the color of the "Pick Color" button to the selected color. I would keep as a gray button as it gets a little hard to see it when you're choosing colors sometimes.

    Great job though on the control...works exactly as I wanted it to

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710

    Default

    I guess a workaround for now is to simply use the mycolorpicker.setValue('ffffff') right before calling the form.reset(). This works but you do see a flash of the hex value appear in the field before clearing.

    But works for now...

  6. #6
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    204

    Default

    Solved!

    I've edited the first post.

  7. #7

    Default

    Hi garraS!

    Good work.

    When i manually edit color value, field background stay unchanged (FF3 for example in my case).

    Here is my workaround :
    Code:
        initComponent : function(){
            Ext.ux.form.ColorPickerFieldPlus.superclass.initComponent.call(this);
            this.menu1 = new Ext.menu.ColorMenu();
            this.menu2 = new Ext.ux.menu.ColorMenu();
            this.on('valid', function(){
                var v = this.getValue();
                var i = this.menu2.picker.rgbToHex(
                    this.menu2.picker.invert(this.menu2.picker.hexToRgb(v)));
                if (v && i) { //fix: IE7 issue
                    this.el.applyStyles('background: #'+v+'; color: #'+i+';');
                }
            }, this);
        },
    Remove onBlur in Ext.ux.form.ColorPickerFieldPlus object
    Code:
    //    onBlur : function(){
    //        Ext.ux.form.ColorPickerFieldPlus.superclass.onBlur.call(this);
    //		var v = this.getValue();
    //		var i = this.menu2.picker.rgbToHex(this.menu2.picker.invert(this.menu2.picker.hexToRgb(v)));
    //		this.el.applyStyles('background: #'+v+'; color: #'+i+';');
    //    },
    
    Last edited by extuser007; 22 May 2009 at 5:42 AM. Reason: fix: IE7 issue

  8. #8

    Question

    Need to purchase the right to use?

  9. #9
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    204

    Default

    Quote Originally Posted by extuser007 View Post
    Hi garraS!

    Good work.

    When i manually edit color value, field background stay unchanged (FF3 for example in my case).

    Here is my workaround :
    Code:
        initComponent : function(){
            Ext.ux.form.ColorPickerFieldPlus.superclass.initComponent.call(this);
            this.menu1 = new Ext.menu.ColorMenu();
            this.menu2 = new Ext.ux.menu.ColorMenu();
            this.on('valid', function(){
                var v = this.getValue();
                var i = this.menu2.picker.rgbToHex(
                    this.menu2.picker.invert(this.menu2.picker.hexToRgb(v)));
                this.el.applyStyles('background: #'+v+'; color: #'+i+';');
            }, this);
        },
    Remove onBlur in Ext.ux.form.ColorPickerFieldPlus object
    Code:
    //    onBlur : function(){
    //        Ext.ux.form.ColorPickerFieldPlus.superclass.onBlur.call(this);
    //        var v = this.getValue();
    //        var i = this.menu2.picker.rgbToHex(this.menu2.picker.invert(this.menu2.picker.hexToRgb(v)));
    //        this.el.applyStyles('background: #'+v+'; color: #'+i+';');
    //    },
    
    Nice! I've added to the first post. Thanks!

    Quote Originally Posted by three_uncle View Post
    Need to purchase the right to use?
    Like I said in my first post, "If you use it, you buy me a Coke!".
    You don't need to purchese, but if you want, you can donate (look DEMO link).

  10. #10

    Default

    very thanks your Plugins. if you come to china. I ask you a cup of coffee and beer.
    Sorry, English is not very good.

Page 1 of 4 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •