PDA

View Full Version : [3.x] Ext.ux.ColorPickerField



vtswingkid
10 Jul 2009, 8:28 AM
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
11 Jul 2009, 9:06 PM
Notice the override in test.html...hopefully that will be integrated back into ext 3.x

FYI: http://extjs.com/forum/showthread.php?p=356622#post356622

tobiu
13 Jul 2009, 2:48 PM
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
13 Jul 2009, 6:38 PM
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
14 Jul 2009, 4:38 AM
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
14 Jul 2009, 6:11 AM
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
23 Jul 2009, 11:29 AM
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
24 Jul 2009, 2:46 AM
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
24 Jul 2009, 5:12 AM
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
24 Jul 2009, 10:03 AM
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?

steffenk
24 Jul 2009, 10:31 AM
@vtswingkid

better i show you, i put it online. Click on the first ColorPicker, the fields for RGB etc aren't visible, but they are in form items, Dunno yet why.

I did some little changes for always getting uppercase, also there was an issue with the regex won't work if value start with #

Here is the online demo:
http://dev.sk-typo3.de/ext/colorpicker.html

(btw i used it as template for the simple colorpicker)

PS: the calculation of invert seems to be problematic if you choose grey colors, original and invert is always nearly same.

vtswingkid
25 Jul 2009, 8:18 AM
steffenk: this does not appear to be the same code I posted at the top of the thread. I overrode getColor. This code assumes that it isn't. So I do not know what else is missing. I'll try to take a look at it monday.

steffenk
26 Jul 2009, 2:56 AM
Hi,

the problem is the same occure in your versions. The formPanel isn't rendered for some reason.
I tried to repair but without success since now.

What's the exact problem with getColor? I didn't found a problem, that's the reason i omitted the override. But this has nothing to do with rendering of the formPanel.

steffenk
26 Jul 2009, 7:54 AM
finally i got it solved.
forceLayout:true was the missing in formPanel, now it's visible.

I fixed 2 more bugs and now i'm nearly satisfied.
My wish for next change:
Don't apply colors to the buttons, make a colored div bside the buttons where the color is displayed.

Last version: http://dev.sk-typo3.de/ext/colorpicker.html

steffenk
26 Jul 2009, 11:41 PM
one more:

the textfields behave strange. There is no selection on dblclick.
I tried with one field using "selectOnFocus" which leads to not able to access the field anymore ... :(

jurban
22 Sep 2009, 1:17 PM
This is exactly what I was looking for. Where is the latest and greatest source for this?

palash
23 Oct 2009, 9:46 AM
Hi
I am trying to use this , but it's missing "fieldpanel.js". Where should I get it from.

AndreTheDiminutive
3 Dec 2009, 3:39 AM
I applied the changes per this thread and got the colorpicker working using test.html.

However, it is not working in my propertygrid, which is nested inside a tab.

Please let me know what I'm doing wrong.


{
title:'Menus',
frame:true,
bodyStyle:'padding:5px 5px 0',
items:[{
xtype: 'propertygrid',
width: 347,
autoHeight: true,
propertyNames: {
menuheight:'Height of menubar in ems',
menuspace:'Space between menu and content',
buttoncolor: 'Color for Menu buttons'
},
source: {
menuheight:6,
menuspace:8,
buttoncolor:'34B49C'
},
customEditors: {
menuheight: new Ext.grid.GridEditor(new Ext.form.ComboBox({
store: [6,7,8],
triggerAction: 'all',
editable: false,
allowBlank: false
}), {}),
menuspace: new Ext.grid.GridEditor(new Ext.form.ComboBox({
store: [5,6,7,8,9,10,11,12],
triggerAction: 'all',
editable: false,
allowBlank: false
}), {}),
buttoncolor: new Ext.grid.GridEditor(new Ext.ux.form.ColorPickerField({
name: 'color',
value: '123456'

}), {})

},

viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
}

}]
},

bkraut
29 Jan 2010, 12:30 AM
I used colorPickerField within a grid. When I select a color, the value in a grid is not updated. I'm attaching an image.
But it works in a form flawless.

jcarbou
2 Mar 2010, 5:39 AM
I modify the code and css to change the look of the colorPicker (see screenshot). I replace :

- "inverse area" by inverse button (you can see the inverse color using the tooltip !)
- "WebSafe area" by websafe button (you can see the webSafe color using the tooltip !)
- "pick area" by a "preview area" and "OK button"
- I add a onDestroy method but It's need more work to be perfect...

Code and sample available in the attached zip file.


I work to add the possibilty to choose the opacity in the picker...

jcarbou
3 Mar 2010, 8:29 AM
I have added the possibility to edit color with opacity (alpha transparency). These colors contains 8 hexa charcaters instead of 6 for standard HTML color (Ex "#AA123456").

The components (field, menu and picker) can edit HTML colors or colors with transparency (just set the opacity property to true, see the demo code).

See attached files for source code, demo and screenshot

jcarbou
4 Mar 2010, 6:38 AM
I have changed the ColorPickerField to support 2 new properties :
- hideHtmlCode (boolean) : To hide the html value of the color in the textfield (Ex : #A12352)
- editMode (string) : Type of color edition.
* "picker" : to edit the color with the picker menu (by default)
* "palette" : to edit the color with the palette menu
* "all" : to edit the color with the 2 menus (twinTrigger)

I have changed the trigger's icons with more funny images...

You can see all these evolutions in screenshots.

juanmdqrollpix
12 Mar 2010, 10:16 AM
Hi, I have the same problem of bkraut. I want to use colorPickerField within a grid, as the editor of a cell, but when I select a color, the value in a grid is not updated. In a form the colorPickerField is working great. How can I solve it? Please, help.

Thanks

Urkman
16 Mar 2010, 6:44 AM
Hello,


Hi, I have the same problem of bkraut. I want to use colorPickerField within a grid, as the editor of a cell, but when I select a color, the value in a grid is not updated. In a form the colorPickerField is working great. How can I solve it? Please, help.

Thanks

I have the same problem. I try to use the colorpicker in a property grid.

Perhaps somebody can help me with this...

Greetings,
Urkman

Urkman
17 Mar 2010, 8:50 AM
Hello,

it seems, that this is not working with Grids :-(
So somebody know another colorpicker extension to use with a grid?

Thanks and Greetings,
Urkman

powellke
17 Mar 2010, 8:55 AM
I have used ColorPaletteField (http://www.extjs.com/forum/showthread.php?t=89312) with success in everything except IE.

jcarbou
17 Mar 2010, 2:11 PM
I have modifed the test.html (in zip file) with some examples to used ColorPickerField as GridEditor...

powellke
17 Mar 2010, 2:21 PM
The editor in the first column of the grid still doesn't work for me. This is the editMode: 'palette' case. No matter what is picked in the color menu the grid cell doesn't change.

jcarbou
18 Mar 2010, 12:30 AM
I just forgot the "allowBlur:true" for the first column.

Urkman
23 Mar 2010, 10:21 AM
Hello,

I found a new problem using this colorpicker:

I added the gridfilter extension to my project and this crashed the display of the colorpicker. This happens, after i added the gridfilter.css file. So I tried to find out, what entry of this files crashes the collorpicker.
And I found the problem:


li.x-menu-list-item div {
display: inline;
}


Is there a way to handle this?

Thanks and greetings,
Urkman

powellke
23 Mar 2010, 10:28 AM
Putting in the "allowBlur: true" still doesn't work for me.

jcarbou
24 Mar 2010, 12:28 AM
The css class "li.x-menu-list-item div" of the grid filter is in a section with this comment :

/* Temporary Patch for Bug ??? */

I use the GridFilter pluggin with this class commented. It's work fine ! (May be I don't used all grid filter pluggin functions ?)

jcarbou
24 Mar 2010, 12:36 AM
Hi powellke


I tested this code on IE 8 and it's work fine. What is your browser ?



var cm = new Ext.grid.ColumnModel([{
header: 'editMode:\'palette\'',
dataIndex: 'f0',
width: 70,
editor: new Ext.grid.GridEditor(new Ext.ux.form.ColorPickerField({
editMode:'palette'
}),{
allowBlur:true
})
},
...

powellke
24 Mar 2010, 7:11 AM
My mistake... It works now. I had put "allowBlur" as a config option to the ColorPickerField instead of the GridEditor.
Thanks for the code snippet.

fabito
6 Apr 2010, 6:41 AM
Hi,

I´m using the colorpickerfield within a PropertyGrid but after upgrading to 3.2.0 it stopped working. My code look like this:



customEditors:
{
CorDeFundo: new Ext.grid.GridEditor(new Ext.ux.form.ColorPickerField({ editMode: 'palette', selectOnFocus: true }), {
allowBlur: true
})
, Cor: new Ext.grid.GridEditor(new Ext.ux.form.ColorPickerField({ editMode: 'palette' }), {
allowBlur: true
})

}


The field is rendered normally. After clicking the trigger the palette is displayed successfully. However when picking a color
nothing happens.

Anyone having similar problems?

greets
Fábio

jcarbou
8 Apr 2010, 4:37 AM
Replace allowBlur:true by allowBlur:false.

It's strange but it's work fine !

fabito
14 Apr 2010, 11:36 AM
Replace allowBlur:true by allowBlur:false.

It's strange but it's work fine !

Yep that solved the problem.
Thanks!

iceblast_01
14 Apr 2010, 7:43 PM
I am trying to use this on a form, but if I use form.form.loadRecord(record); I get an error,

firebug says:
this.el is undefined
[this.el.applyStyles('background: #' + v + '; color: #' + i + ';'); on line 83

have anyone encountered this?

pyonny
26 Apr 2010, 9:09 PM
It's work fine, but in my environment (ext 3.2.0, firefox 3.6) error console says

"b is undefined"

when opening the colorpicker and selecting color.

harley.333
6 May 2010, 7:07 PM
Awesome widget! I'm very impressed!

Unfortunately, it doesn't appear to handle all the forms of color definitions. Specifically, the form of "rgb(0,0,0)" and colornames do not appear to work.

The following change seems to fix the issues:


Ext.ux.ColorPicker.prototype.splitAphaRgbHex = function(c) {
if (this.opacity && /^[0-9a-fA-F]{8}$/.test(c)) {
return {
rgbHex: c.substring(2),
alpha: this.hexToDec(c.substring(0, 2))
}
}
if (c.indexOf("rgb(") == 0) {
c = c.replace(/ /g, "");
c = c.substring(4, c.length - 1).split(",");
c = this.rgbToHex(c[0], c[1], c[2]);
} else if (!/^[0-9a-fA-F]{6}$/.test(c)) {
c = Ext.ux.ColorPicker.colorNames[c];
if (!Ext.isDefined(c)) {
return;
}
}
return {
rgbHex:c,
alpha:256
}
};


Ext.ux.ColorPicker.colorNames = {
"aliceblue": "F0F8FF",
"antiquewhite": "FAEBD7",
"aqua": "00FFFF",
"aquamarine": "7FFFD4",
"azure": "F0FFFF",
"beige": "F5F5DC",
"bisque": "FFE4C4",
"black": "000000",
"blanchedalmond": "FFEBCD",
"blue": "0000FF",
"blueviolet": "8A2BE2",
"brown": "A52A2A",
"burlywood": "DEB887",
"cadetblue": "5F9EA0",
"chartreuse": "7FFF00",
"chocolate": "D2691E",
"coral": "FF7F50",
"cornflowerblue": "6495ED",
"cornsilk": "FFF8DC",
"crimson": "DC143C",
"cyan": "00FFFF",
"darkblue": "00008B",
"darkcyan": "008B8B",
"darkgoldenrod": "B8860B",
"darkgray": "A9A9A9",
"darkgreen": "006400",
"darkgrey": "A9A9A9",
"darkkhaki": "BDB76B",
"darkmagenta": "8B008B",
"darkolivegreen": "556B2F",
"darkorange": "FF8C00",
"darkorchid": "9932CC",
"darkred": "8B0000",
"darksalmon": "E9967A",
"darkseagreen": "8FBC8F",
"darkslateblue": "483D8B",
"darkslategray": "2F4F4F",
"darkslategrey": "2F4F4F",
"darkturquoise": "00CED1",
"darkviolet": "9400D3",
"deeppink": "FF1493",
"deepskyblue": "00BFFF",
"dimgray": "696969",
"dimgrey": "696969",
"dodgerblue": "1E90FF",
"firebrick": "B22222",
"floralwhite": "FFFAF0",
"forestgreen": "228B22",
"fuchsia": "FF00FF",
"gainsboro": "DCDCDC",
"ghostwhite": "F8F8FF",
"gold": "FFD700",
"goldenrod": "DAA520",
"gray": "808080",
"green": "008000",
"greenyellow": "ADFF2F",
"grey": "808080",
"honeydew": "F0FFF0",
"hotpink": "FF69B4",
"indianred": "CD5C5C",
"indigo": "4B0082",
"ivory": "FFFFF0",
"khaki": "F0E68C",
"lavender": "E6E6FA",
"lavenderblush": "FFF0F5",
"lawngreen": "7CFC00",
"lemonchiffon": "FFFACD",
"lightblue": "ADD8E6",
"lightcoral": "F08080",
"lightcyan": "E0FFFF",
"lightgoldenrodyellow": "FAFAD2",
"lightgray": "D3D3D3",
"lightgreen": "90EE90",
"lightgrey": "D3D3D3",
"lightpink": "FFB6C1",
"lightsalmon": "FFA07A",
"lightseagreen": "20B2AA",
"lightskyblue": "87CEFA",
"lightslategray": "778899",
"lightslategrey": "778899",
"lightsteelblue": "B0C4DE",
"lightyellow": "FFFFE0",
"lime": "00FF00",
"limegreen": "32CD32",
"linen": "FAF0E6",
"magenta": "FF00FF",
"maroon": "800000",
"mediumaquamarine": "66CDAA",
"mediumblue": "0000CD",
"mediumorchid": "BA55D3",
"mediumpurple": "9370DB",
"mediumseagreen": "3CB371",
"mediumslateblue": "7B68EE",
"mediumspringgreen": "00FA9A",
"mediumturquoise": "48D1CC",
"mediumvioletred": "C71585",
"midnightblue": "191970",
"mintcream": "F5FFFA",
"mistyrose": "FFE4E1",
"moccasin": "FFE4B5",
"navajowhite": "FFDEAD",
"navy": "000080",
"oldlace": "FDF5E6",
"olive": "808000",
"olivedrab": "6B8E23",
"orange": "FFA500",
"orangered": "FF4500",
"orchid": "DA70D6",
"palegoldenrod": "EEE8AA",
"palegreen": "98FB98",
"paleturquoise": "AFEEEE",
"palevioletred": "DB7093",
"papayawhip": "FFEFD5",
"peachpuff": "FFDAB9",
"peru": "CD853F",
"pink": "FFC0CB",
"plum": "DDA0DD",
"powderblue": "B0E0E6",
"purple": "800080",
"red": "FF0000",
"rosybrown": "BC8F8F",
"royalblue": "4169E1",
"saddlebrown": "8B4513",
"salmon": "FA8072",
"sandybrown": "F4A460",
"seagreen": "2E8B57",
"seashell": "FFF5EE",
"sienna": "A0522D",
"silver": "C0C0C0",
"skyblue": "87CEEB",
"slateblue": "6A5ACD",
"slategray": "708090",
"slategrey": "708090",
"snow": "FFFAFA",
"springgreen": "00FF7F",
"steelblue": "4682B4",
"tan": "D2B48C",
"teal": "008080",
"thistle": "D8BFD8",
"tomato": "FF6347",
"turquoise": "40E0D0",
"violet": "EE82EE",
"wheat": "F5DEB3",
"white": "FFFFFF",
"whitesmoke": "F5F5F5",
"yellow": "FFFF00",
"yellowgreen": "9ACD32"
};

jcarbou
7 May 2010, 12:21 AM
This new version fix some bugs (harley patch for example) and optimize the css.

Note : I have changed the javascripts file names to match the class names..

Gerard Pastis
19 May 2010, 1:13 AM
There is an error in test.html

this.splitAphaRgbHex is not a function
var alphaRgb = this.splitAphaRgbHex(v); // ColorPickerField.js:137

jcarbou
19 May 2010, 2:05 AM
I have tested the ColorPicker.zip of my last post with IE / FF and Chrome without errors.... What is your browser and what action do you do ?

Gerard Pastis
19 May 2010, 2:11 AM
I've put Colopicker unzipped on a local webserver and try to load Colorpicker/test.html
Same error on FF 3.6 / Chrome

on Chrome
Uncaught TypeError: Property 'splitAphaRgbHex' of object [object Object] is not a function

jcarbou
19 May 2010, 2:14 AM
Ok ! The zip file no need webserver. Just unzip on a simple folder and run test.html.

Gerard Pastis
19 May 2010, 3:50 AM
Thanks ! :)

(Why it isn't working on a webserv ? :P
I've tried to change te path to ColorPicker css/js but same issue)

dasnk
3 Jun 2010, 1:23 AM
Using the version from post #41 above.

I am getting invalid color codes posted to the server: #FF33CCCC

Unfortunately it doesn't seem to be a simple case of strippping of the last chars to fix it.

jcarbou
3 Jun 2010, 1:31 AM
This code is not really invalid. It contain 2 hexa char (the two first) for opacity. Set opacity option to false to genarate standard color code with 6 hexa char.

dasnk
3 Jun 2010, 1:39 AM
This code is not really invalid. It contain 2 hexa char (the two first) for opacity. Set opacity option to false to genarate standard color code with 6 hexa char.


Ah ok, so that's what the opacity option does, that's what I get for just copy and pasting code!

It works fine now without that option set, thanks for the fast response! :)

jcarbou
3 Jun 2010, 1:42 AM
The opacity option is very usefull to edit color for application who support transparency (GoogleEarth or other SIG for example)

sosy
24 Jul 2010, 12:28 AM
I like it! Put in my favorites!

dorgan
29 Sep 2010, 12:51 PM
I have found a bug.


If you put CCCCCC in as a color then when you hit OK it is turning the value into CDCDCD.


And if you hit edit then hit OK again...it will change that value and you can actually keep doing it....it should not be trying to change any value that is entered...or at least have a mode that enables that behavoir.

iv_ekker
4 Oct 2010, 11:48 PM
I have found a bug.


If you put CCCCCC in as a color then when you hit OK it is turning the value into CDCDCD.


And if you hit edit then hit OK again...it will change that value and you can actually keep doing it....it should not be trying to change any value that is entered...or at least have a mode that enables that behavoir.

Hi!

To fix the bug change the file colorpicker.js
method
/**
* Convert a float to decimal
* @param {Float} n
* @return {Integer}
*/
realToDec: function( n ) {
return Math.min( 255, Math.round( n * 256 ) );
},

to text
/**
* Convert a float to decimal
* @param {Float} n
* @return {Integer}
*/
realToDec: function( n ) {
return Math.min( 255, Math.round( n * 255 ) );
},

dorgan
5 Oct 2010, 6:31 AM
Excellent...all is well now!

mitchellsimoens
18 Nov 2010, 10:06 AM
Just was wondering why you don't include "virtual.xml" to have a complete example. Why do you create records manually? No biggie but just was wondering why do it that way. Great extension tho!

lynxua
23 Nov 2010, 7:56 AM
Cell with ColorPicker exiting from editing mode only if i click on other editable cell in the grid.

mitchellsimoens
3 Dec 2010, 6:42 AM
Thanks ! :)

(Why it isn't working on a webserv ? :P
I've tried to change te path to ColorPicker css/js but same issue)

I had the same issue on my Mac. I had to "right-click" on the ColorPicker folder and select "Get Info". At the bottom of the window that pops up, I had to change the access for everyone to read & write. Now it works on my web server!

mitchellsimoens
3 Dec 2010, 1:54 PM
I'm surprised that there really isn't any events. There is one.

pepebe
21 Dec 2010, 12:38 AM
Great plugin, really.

test.html works as expected.

Now I'm trying to make it work inside a formpanel.

It basically works, but after initial clicking on the colorpicker button, slider and picker don't move to their positions as they do in test.html. They stay on top and top/left position.

If I pick a color, push Ok and then click on the colorpicker icon again, they are at their correct positions.



// Test to create a simple color picker module...

Ext.onReady(function(){

var colorpicker = new Ext.form.FormPanel({

frame:true,
title: 'Background Colors',

width: 350,
defaults: {width: 230},
//defaultType: 'textfield',
items: [
{
fieldLabel: 'body',
editMode:'all',
name: 'body',
value: '#292BAF',
id: 'body',
xtype: 'colorpickerfield',
width:150,
}
]

});
colorpicker.render('colorpicker');
});
I don't really need the animation, but the correct position is very important. Any clue what I'm doing wrong here?

Regards,

pepebe

pepebe
21 Dec 2010, 12:58 AM
Arghhh,

forgot to add



Ext.QuickTips.init();


Right behind



Ext.onReady(function(){


Sorry,

pepebe

iBeb
30 Jul 2011, 1:32 PM
I'm using Ext.ux.ColorPickerField as an editor in a Ext.grid.EditorGridPanel.

var grid=new Ext.grid.EditorGridPanel({
height : 250
,frame : true
,title : 'Contact'
,store : new Ext.data.JsonStore({
idProperty : 'initial'
,fields : ['initial','value','backgroundColor','color']
,data : this.data.contact
});
,clicksToEdit : 1
,columns : [
{header:'Initial',width:50,sortable:true,dataIndex:'initial',editor:new Ext.form.TextField()}
,{header:'Value',width:150,sortable:true,dataIndex:'value',editor:new Ext.form.TextField()}
,{header:'Color',width:100,sortable:true,dataIndex:'color',editor:new Ext.ux.form.ColorPickerField()}
,{header:'Background Color',width:100,sortable:true,dataIndex:'backgroundColor',editor:new Ext.ux.form.ColorPickerField()}
]
});
But the problem is that when you click on the palette or change manually a value in the Color picker, the field is blurred and the grid stops editing the cell so the value is never updated...
Any idea?

manog
28 Feb 2012, 11:51 PM
Ext js 3.4 version
i am also using this plugin for color picker in grid panel.Now it will be working fine.After choose the color from color picker,the hex decimal value and color is added into combo field but color is not showing(hex decimal value only showing ) if i click another column in editor grid panel.So I want to show color also not only hex decimal values when i click outside of color picker column.
please reply me

thanks

manog
28 Feb 2012, 11:56 PM
Ext js 3.4 version
i am also using this plugin for color picker in grid panel.Now it will be working fine.After choose the color from color picker,the hex decimal value and color is added into combo field but color is not showing(hex decimal value only showing ) if i click another column in editor grid panel.So I want to show color also not only hex decimal values when i click outside of color picker column.
please reply me

thanks

manog
28 Feb 2012, 11:59 PM
Hi powellke


I tested this code on IE 8 and it's work fine. What is your browser ?



var cm = new Ext.grid.ColumnModel([{
header: 'editMode:\'palette\'',
dataIndex: 'f0',
width: 70,
editor: new Ext.grid.GridEditor(new Ext.ux.form.ColorPickerField({
editMode:'palette'
}),{
allowBlur:true
})
},
...


Ext js 3.4 version
i am also using this plugin for color picker in grid panel.Now it will be working fine.After choose the color from color picker,the hex decimal value and color is added into combo field but color is not showing(hex decimal value only showing ) if i click another column in editor grid panel.So I want to show color also not only hex decimal values when i click outside of color picker column.
please reply me

thanks