Hi, all

This is my first time post. Hope you guys can help me.

I want to make a color picker. I known there is already has a color picker sample with Ext toolbar, but I want a different such like this picture.


1. Push the button then show color picker window.
2. Pick a color then pass the value to target field.

My code is :

file name: hello.js
var HelloWorld = function(){
var dialog, showBtn;

return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){
dialog = new Ext.BasicDialog("hello-dlg", {
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.body.update('Here is the color table.');
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();
Ext.onReady(HelloWorld.init, HelloWorld, true);

File name: index.php
<input id="color" type="text">
<input type="button" id="show-dialog-btn" value="Pick Color" />

<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">

<div class="x-dlg-hd">Color Picker</div>
<div class="x-dlg-bd"></div>
</div>

* I use Ext sample to do this.

Hope someone can tell me how to put Ext color item in the window body.

Thank you.


Cipher Chien