Add Click Event with ExtJS Panel

I am trying to create panel in ext js and got success on that but I also want to add click event with this

       {
            xtype: 'panel',
            flex: 1,
            x: 10,
            y: p开发者_运维知识库arseInt(panelCreation[i - 1].y) + 
               parseInt(panelCreation[i -1].height) + 10,
            width: twidth,
            height: theight,
            layout: 'absolute'                
        }

I don't want to add click event separately I want to add with this code like after layout:absolute add comma and event please help me in this.

---

You can add in the following for a click event:

listeners: {
   'render': function(panel) {
       panel.body.on('click', function() {
           alert('onclick');
       });
    }
}

EDIT: to get the X and Y coordinates of the click event you can change the click event handler as follows...

panel.body.on('click', function(e) {
   alert('X: ' + e.getPageX());
   alert('Y: ' + e.getPageY());
});

---

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

---

There's, in my opinion, a much more straightforward way to do this...(taken straight out of the docs). For more info about adding a listener see here. (Ext Js 4)

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});