javascript - ExtJs HTML 组件点击事件

Question

我通过指定面板的 html 值在 extJS 中构建了一个自定义 HTML 组件。我无法将事件处理程序附加到元素(或者它们以某种方式未触发)。但是，我可以在组件上执行其他操作，例如隐藏、追加等。

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

我找到了一个 example and explanation为什么这在 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()
});