[3.x] Ext.ux.ColorPickerField

[vtswingkid]

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

[mystix]

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

[tobiu]

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:

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

[tobiu]

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

[tobiu]

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

[tobiu]

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

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

/**
 * @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);

[rd]

Hi,

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

Fix:

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

[steffenk]

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?

[steffenk]

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.

[vtswingkid]

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?