1

更新 2：这确认 cpuchartclicked 事件正在被触发，因为 alert('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');
            }
        }
    }

]

更新：通过以下内容，我正在设置点击处理程序的范围。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
});

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

但我得到一个错误 cmp.fireEvent() is not a function？

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

3 回答 3

2

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

然后，在afterrender侦听器中，您检索该组件的主 DOM 元素，它恰好是一个<img>标签，并在元素click对象上设置侦听器，它是.Ext.dom.Element

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

我建议在使用它们之前在文档中查找事件签名。还尝试debugger在爆炸的行之前添加一条语句，并查看传入了哪些变量以及发生了什么。在这里使用 Chrome 或 Firefox 调试器会非常有帮助。

于 2014-01-14T18:10:49.507 回答
0

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

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

它解决了我在 ext5 中的问题

于 2015-01-19T21:23:42.097 回答
0

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

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

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
}
于 2014-01-15T00:22:02.953 回答