Добавить событие Click с панелью ExtJS

Question

Я пытаюсь создать панель в ext js и добился успеха, но я также хочу добавить событие клика с этим

       {
            xtype: 'panel',
            flex: 1,
            x: 10,
            y: parseInt(panelCreation[i - 1].y) + 
               parseInt(panelCreation[i -1].height) + 10,
            width: twidth,
            height: theight,
            layout: 'absolute'                
        }

Я не хочу добавлять событие клика отдельно Я хочу добавитьс этим кодом, как после макета: абсолютно добавить запятую и событие, пожалуйста, помогите мне в этом.

Answer 1

Для события щелчка можно добавить следующее:

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

РЕДАКТИРОВАТЬ: чтобы получить координаты X и Y события щелчка, вы можете изменить обработчик события щелчка следующим образом ...

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

Answer 2

На мой взгляд, есть гораздо более простой способ сделать это ... (взят из документов ).Для получения дополнительной информации о добавлении слушателя см. здесь .(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'); }
        }
    }
});

Answer 3

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
    }
});