ExtJs HTML Component Click Event

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.

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

Are you using ExtJS 4?

First, have you tried "Ext.get" instead of "Ext.select"?

If you are using ExtJS 4, there is an easier way of dong this actually. 4 lets you set events on the "el" of the widgets.

For Extjs 3.3.1, you can use Ext.getCmp() instead.

Here Ext.select() returns CompositeElementLite/CompositeElement and these components do not extend from Observable. So it does not support binding with on().

Ext.getCmp() returns Ext.Component, so it can.

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.