How to connect an event handler to a panel in extJS?

Question

All I want to do is handle the click on the extJS panel .

I tried all the suggestions on this, plus everything I could find elsewhere, but each of them failed in the ways described below.

What is the correct syntax for adding a click event handler to an extJS panel?

[ Edit : for the sake of others who may find this question later, I will add a few comments to the line to simplify its decoding - @bmoeskau]

the handler does not execute:

var menuItem1 = new Ext.Panel({ id: 'panelStart', title: 'Start', html: 'This is the start page.', cls:'menuItem', listeners: { click: function() { alert('ok'); } } }); 

[Ed: click not a Panel event]

the handler does not execute:

 var menuItem1 = new Ext.Panel({ id: 'panelStart', title: 'Start', html: 'This is the start page.', cls:'menuItem', listeners: { render: function(c) { c.body.on('click', function() { alert('ok'); }); } } }); 

[Ed: panel never displays - add renderTo configuration. Then you will throw a zero error telling you that c not a valid variable. Do you mean menuItem1 instead?]

the handler does not execute:

 var menuItem1 = new Ext.Panel({ id: 'panelStart', title: 'Start', html: 'This is the start page.', cls:'menuItem' }); Ext.getCmp('panelStart').on('click', function() { alert('ok'); }); 

[Ed: click not a Panel event. In addition, the panel is not yet displayed, so if you switched the callback to an element rather than a component, you would get a zero error.]

gets an error: Ext.get ('panelStart') is null:

 var menuItem1 = new Ext.Panel({ id: 'panelStart', title: 'Start', html: 'This is the start page.', cls:'menuItem' }); Ext.get('panelStart').on('click', function() { alert('ok'); }); 

[Ed: Not displayed, see above. Switching from getCmp to get means that you are switching from a link to a Component (which exists but does not have a click event) to a link to an Element (which has a click event but is not yet displayed / is invalid).]

the panel disappears:

 var menuItem1 = new Ext.Panel({ id: 'panelStart', title: 'Start', html: 'This is the start page.', cls:'menuItem', listeners: { 'render': { fn: function() { this.body.on('click', this.handleClick, this); }, scope: content, single: true } }, handleClick: function(e, t){ alert('ok'); } }); 

[Ed: the scope passed to the callback ( content ) is not a valid reference number in this code (this was copied incorrectly from another sample). Since Panel var is created as menuItem1 , and the callback is intended to be run in the panel scope, the var area should be menuItem1 . In addition, this panel is never displayed, see previous comments.]

gives the error "Ext.fly (menuItem1.id) is null":

 var menuItem1 = new Ext.Panel({ id: 'panelStart', title: 'Start', html: 'This is the start page.', cls:'menuItem' }); Ext.fly(menuItem1.id).addListener('click', Ext.getCmp(menuItem1.id) , this); 

[Ed: panel is not displayed, see above]

... put outside Ext.onReady () ... gets an error: Ext.getCmp ('panelStart') is null

 Ext.getCmp('panelStart').on('click', function() { alert('okoutside'); }); 

[Ed: The panel probably does not appear at the time this code is run. In addition, click not a Panel event.]

... put outside Ext.onReady () ... gets an error: Ext.get ('panelStart') is null

 Ext.get('panelStart').on('click', function() { alert('okoutside'); }); 

[Ed: see above]

... put outside Ext.onReady () ... gets an error: Ext.fly ('panelStart') is null

 Ext.fly('panelStart').on('click', function() { alert('okoutside'); }); 

[Ed: see above]

Over the past three, I checked Firebug and <div id="startPanel"> exists:

It works with jQuery:

So, with jQuery, I just have to do this, and it works:

 $('body').delegate(('#panelStart'), 'click', function(){ alert('ok with jquery'); }); 

[Ed: This is not a very good approach. This simply delays the binding of the handler until the element actually appears in the DOM (which could also be done via Ext btw, but still would not be the right approach). I have outlined the correct approach as indicated in my answer below. All OP attempts are very close, but each one is missing one or two parts.]

How can I bind a click handler like this with extJS?

Answer 1

[For those who read this, I have explained this in detail here .]

You are missing a few key concepts:

click not a valid Panel event, so adding a click handler to the panel will do nothing (this is a problem in most of the codes above).

In this code:

 var menuItem1 = new Ext.Panel({ ... }); content.body 

You are copying from another answer, but wrong. content in other code referenced by the created panel is a variable. In this code, you created a panel as menuItem1 , but then try to link to it as content ?

Please re-read my previous explanation on how rendering works in the other answer I gave you. You must add the panel to the container that displays it, or visualize it directly (via the renderTo configuration). If you do not, the panel will not appear.

Using the jQuery delegate function is not the right approach with Ext JS components.

Answer 2

try the following:

 var menuItem1 = new Ext.Panel ({
     id: 'panelStart',
     title: 'Start',
     html: 'This is the start page.',
     cls: 'menuItem',
     listeners: {
         afterrender: function (comp) {
             var element = comp.getEl ();
             element.on ('click', function () {
                 alert ('ok')
             });
         }
     }
 }); 

Answer 3

If you want to listen for events on Ext.Elements inside the panel, you use the element property when calling addListener or pass it to listeners config, instead of waiting for afterrender events only to set listeners

 var menuItem1 = new Ext.Panel({ id: 'panelStart', title: 'Start', html: 'This is the start page.', cls:'menuItem', listeners: { click: { element: 'el', // could be 'body', or any other Ext.Elements // that are available from the component fn: function() {} } } }); 

Answer 4

Or a simpler approach:

  listeners: { 'expand': {fn: adminSelected }}