1. #1
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    504
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Thumbs up [3.x] Ext.ux.ColorPickerField

    [3.x] Ext.ux.ColorPickerField


    Have ported the 2.0 version from

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

    Notice the override in test.html...hopefully that will be integrated back into ext 3.x
    Attached Files

  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


    Quote Originally Posted by vtswingkid View Post
    Notice the override in test.html...hopefully that will be integrated back into ext 3.x
    FYI: http://extjs.com/forum/showthread.ph...622#post356622

  3. #3
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi vtswingkid,

    thanks for porting it to 3.0!
    in test.html you should remove the fieldpanel-include and the config target:side, since this is not needed there.

    i found a css-collision with this and the grid-filters. there i have the following:
    Code:
    li.x-menu-list-item div {
    	display: inline;
    }
    and this makes the color-menu look like in the attachement =/
    any idea why this is the case and how we can get those two "addons" work together?


    tanks and kind regards, tobiu
    Attached Images

  4. #4
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    i found another issue:

    when you are in the colorPicker and click on the "pick color" button, nothing happens at the first time. the menu disappears and the form-field stays unchanged.

    from the second time opening and chosing, it works as intended.

    kind regards, tobiu

  5. #5
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    when having this field inside a form and calling form.reset(), the value and text- and background-color won't get removed.

    i hope feedback is appreciated
    i am only writing and testing so much, because i like this ux.

    kind regards, tobiu

  6. #6
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    so, time for a bit of contribution

    i changed quite a lot of code.
    field.reset() now works (form.reset() also). the problem was, that setValue() was overwriten and only did something on regex-match, but reset also uses that one.

    the selection now works on the first click of the pick color - button.

    the events hide and show were never triggered, removed.
    i did not get what

    Code:
    show : function(m){ // retain focus styling
        this.onFocus();
    }
    was intended to do. i put a console.log into it, and it was never triggered.

    here is my changed version, if you have any questions about the other changes, feel free to ask.

    kind regards, tobiu

    Code:
    /**
     * @class Ext.ux.form.ColorPickerField
     * @extends Ext.form.TriggerField
     * This class makes Ext.ux.ColorPicker available as a form field.
     * @license: BSD
     * @author: Robert B. Williams (extjs id: vtswingkid)
     * @author: Tobias Uhlig (extjs id: tobiu)
     * @constructor
     * Creates a new ColorPickerField
     * @param {Object} config Configuration options
     * @version 1.1.2
     */
    
    Ext.namespace("Ext.ux.menu", "Ext.ux.form");
    
    Ext.ux.menu.ColorMenu = Ext.extend(Ext.menu.Menu, {
    	enableScrolling : false,
    	hideOnClick     : true,
    	initComponent : function(){
    		Ext.apply(this, {
    			plain         : true,
    			showSeparator : false,
    			items: this.picker = new Ext.ux.ColorPicker(Ext.apply({
    				style: 'width:350px;'
    			}, this.initialConfig))
    		});
    		Ext.ux.menu.ColorMenu.superclass.initComponent.call(this);
    		this.relayEvents(this.picker, ['select']);
    		this.on('select', this.menuHide, this);
    		if (this.handler) {
    			this.on('select', this.handler, this.scope || this)
    		}
    	},
    	menuHide: function(){
    		if (this.hideOnClick) {
    			this.hide(true);
    		}
    	}
    });
    
    Ext.ux.form.ColorPickerField = Ext.extend(Ext.form.TriggerField,  {
        initComponent : function(){
            Ext.ux.form.ColorPickerField.superclass.initComponent.call(this);
            this.menu = new Ext.ux.menu.ColorMenu({
                listeners : {
                    select: function(m, c){
                        this.setValue(c);
                        this.focus.defer(10, this);
                    }
                    ,scope : this
                }
            });
        }
        ,setValue : function(v){
            Ext.ux.form.ColorPickerField.superclass.setValue.apply(this, arguments);
            if (/^[0-9a-fA-F]{6}$/.test(v)) {
                var i = this.menu.picker.rgbToHex(this.menu.picker.invert(this.menu.picker.hexToRgb(v)));
                this.el.applyStyles('background: #' + v + '; color: #' + i + ';');
            } else {
                this.el.applyStyles('background: #ffffff; color: #000000;');
            }
        }
        ,onDestroy : function(){
            if(this.menu) {
                this.menu.destroy();
            }
            if(this.wrap){
                this.wrap.remove();
            }
            Ext.ux.form.ColorPickerField.superclass.onDestroy.call(this);
        }
        ,onBlur : function(){
            Ext.ux.form.ColorPickerField.superclass.onBlur.call(this);
            this.setValue(this.getValue());
        }
        ,onTriggerClick : function(){
            if(this.disabled){
                return;
            }
            this.menu.show(this.el, "tl-bl?");
            this.menu.picker.setColor(this.getValue());
        }
    });
    Ext.reg("colorpickerfield", Ext.ux.form.ColorPickerField);

  7. #7
    Ext User
    Join Date
    Jan 2008
    Posts
    3
    Vote Rating
    0
    rd is on a distinguished road

      0  

    Default Small bug in ColorPicker

    Small bug in ColorPicker


    Hi,

    The updateFromBox() function parses the colors wrong, it should ignore the leading '#'.

    Fix:
    Code:
    updateFromBox: function( event, element ) {
    	this.updateMode = 'click';
    	var col = Ext.get( element ).getColor( 'backgroundColor', '', '' );
    	col = col.replace("#", "");
    	var temp = this.rgbToHsv( this.hexToRgb( col ));
    	this.HSV = { h: temp[0], s:temp[1], v:temp[2]};
    	this.updateColor();
    },
    Ronny

  8. #8
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    where is fieldpanel/fieldpanel.js from as included in test.html? The test.html shows nothing this state.

    Could someone provide a working zip or demo?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  9. #9
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    finally i got it work, also applied the changes suggested in this thread.
    But i'm still missing the fields RGB etc, the input for hex and setting selected color to the form select box.
    Attached Images
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  10. #10
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    504
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Default


    RD: the # should be taken care of with the override that is found in test.html.
    getColor has a bug as of 3.0.0 and needs to be overridden.

    steffend: sorry for the fieldpanel...that should not have been in there. Asside from that it should all be working. Maybe you have an untested browser?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi