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

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

Answer 2

您使用的是ExtJS 4吗？

首先，您是否尝试过“Ext.get”而不是“Ext.select”？

如果您使用的是ExtJS 4，实际上有一种更简单的方法。 4允许您在小部件的“el”上设置事件。

Answer 3

对于Extjs 3.3.1，您可以改为使用Ext.getCmp（）。

这里Ext.select（）返回CompositeElementLite / CompositeElement，这些组件不从Observable扩展。所以它不支持与on（）绑定。

Ext.getCmp（）返回Ext.Component，因此可以。

Answer 4

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

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

ExtJs HTML组件单击事件

4 个答案: