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 finally managed to solve the problem. The problem was not in this part of the code (just as I imagined). The event should and does work because it is just a normal click event on a div element.

The problem was because another text field was getting superimposed on the div element, thereby passing the click events to the TextField instead of the div element.