Question

I am using ExtJs Color Picker component.

 var cp = Ext.create('Ext.picker.Color', {
        style: {
            backgroundColor: "#fff"
        } ,
        listeners: {
            scope:me,
            select: selectColor
        }
    });

But I do not know how can I position color picker at the screen ?

Answer 1

You can encapsulate color component in window object

It will be something like this

    var cp = Ext.create('Ext.picker.Color', {
        style: {
            backgroundColor: "#fff"
        } ,
        listeners: {
            scope:me,
            select: selectColor
        }
    });


  var  window = Ext.create('Ext.window.Window', {
       title: 'Select Color',
       resizable: false,
       draggable: false,
       closeAction: 'hide',
       width: 150,
       height: 135,
       border: false,
       hidden: true,
       layout:'fit',
       floating: true,
       renderTo: "divCompare",
       items: [cp]
   })

Than you can use

win.showat(x,y) 

method