Question

更新2：这确认了cpuchartclicked事件被触发，因为警报（'hello'）有效。我需要的是能够在我的控制器中响应该事件。

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    this.fireEvent('cpuchartclicked');
                }, this);
            },
            'cpuchartclicked':function () {
                alert('hello');
            }
        }
    }

]

更新：通过以下内容，我将设置on click处理程序的范围。 fireEvent（）现在似乎正在工作，但仍然没有在控制器中听到这个事件。

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    alert('on click handler');
                    this.fireEvent('cpuchartclicked');
                }, this);
            }
        }
    }
]

// Listen Application Event
me.application.on({
    cpuchartclicked: me.onChartClicked,
    scope: me
});

我正在尝试在图像上触发自定义事件，因此当单击图像时，控制器会听到事件。

但是我得到一个错误cmp.fireEvent（）不是函数吗？

items: [{
    xtype: 'image',
    itemId: 'graphiteChartCPU',
    src: '',
    listeners:{
        'afterrender':function (comp) {
        comp.getEl().on('click', function (el) {
        el.fireEvent('cpuchartclicked');
        });
        }
    }
}]

me.application.on({
    cpuchartclicked: this.onChartClicked,
    scope: this
});

Answer 1

您正在混淆组件和元素。 afterrender事件侦听器在Image Component上设置，并接收Component本身作为第一个参数（您错误地命名为el）。

然后，在afterrender侦听器中，检索该Component的主DOM元素，该元素恰好是<img>标记，并在元素上设置click侦听器对象，是Ext.dom.Element。

的一个实例

click事件signature不是您所期望的;第一个参数是Ext.util.Event对象，没有fireEvent方法。因此错误。

我建议在使用之前在文档中查找事件签名。还要尝试在爆炸的行之前添加debugger语句，并查看传入的变量和传输的内容。使用Chrome或Firefox调试器在这里非常有帮助。

Answer 2

解决了它，但我想知道这是否是最好的方法。

我通过图像触发自定义事件，然后在控制器中监听图像上的该事件。

items: [
    {
        xtype: 'image',
        itemId: 'graphiteChartCPU',
        src: '',
        listeners:{
            'afterrender':function (comp) {
                comp.getEl().on('click', function (el) {
                    this.fireEvent('cpuchartclicked');
                }, this);
            }
        }
    }
]


'myContainer image':
{
    'cpuchartclicked': me.onChartClicked
}

Answer 3

你必须绑定到像这样的图像元素：

{
    xtype: 'image',
    itemId: 'graphiteChartCPU',
    src: '',
    listeners: {
      el: {
          click: function() {
          console.log("Click");
          }
      }
    }
}

它解决了我在ext5中的问题

在Extjs 4中，为什么我的自定义事件图像el的触发不起作用？

]

3 个答案: