ExtJs HTML Component Click Event

Question

I have built a custom HTML component in extJS by specifying the html value of a panel. I am unable to attach the event handlers to the element (or they are somehow not firing). However, I am able to do other things on the component like hide, append etc.

Ext.select('#toFieldDiv').on('click',function() {
    alert("something");
});  //Doesn't Work

Ext.select('#toFieldDiv').hide('slow');  //Works

Any idea?

Here is my component definition:

{
    xtype: 'panel',
    x: 70,
    y: 0,
    html: "<div id=\"toFieldDiv\" class=\"to-field\"> </div>"
}

I have even tried the same with jQuery. Again the hide works, but not the click.

Answer 1

I found an example and explanation of why this doesn't work out of the box on the Sencha forums. I implemented a suggested solution below.

 Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 200,
    html: '<p>World!</p>',
    listeners: {render: function(c){c.el.on('click', function() { alert('onclick');});}},
    renderTo: Ext.getBody()
});