Using the color picker in a menu

1. Start by creating a button and add a new instance of a ColorPicker to the button's
menu property:
var button = Ext.create('Ext.button.Button', {
text: 'Change the Background Color',
menu: new Ext.menu.ColorPicker({
...
})
});

2. Create a Panel with the button in a toolbar that's docked to the top.
var panel = Ext.create('Ext.Panel', {
height: 300,
width: 400,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [button]
}],
renderTo: Ext.getBody(),
style: 'margin: 50px'
});

3. Add a handler to the ColorPicker to change the body background color to the
selected color:
...
menu: new Ext.menu.ColorPicker({
handler: function(picker, color){
Ext.getBody().setStyle('background-color', '#' + color);
}
})
...