ExtJs HTML组件单击事件

Question

我通过指定面板的html值在extJS中构建了一个自定义HTML组件.我无法将事件处理程序附加到元素(或者它们以某种方式不会触发).但是,我可以在组件上做其他事情,比如hide,append等.

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

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

任何的想法？

这是我的组件定义:

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

我甚至尝试过使用jQuery.隐藏起作用,但不是点击.

Answer 1

我找到了一个例子,并解释了为什么这在Sencha论坛上没有开箱即用.我在下面实施了建议的解决方案

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

Answer 2

我终于成功解决了这个问题。问题不在于这部分代码（正如我想象的那样）。该事件应该并且确实有效，因为它只是 div 元素上的正常单击事件。

问题是因为另一个文本字段叠加在 div 元素上，从而将单击事件传递到 TextField 而不是 div 元素。