如何在 extjs4 中处理控制器中的 dom 事件？答案

【问题标题】：How to handle dom events in controller in extjs4?如何在 extjs4 中处理控制器中的 dom 事件？
【发布时间】：2013-05-25 01:06:49
【问题描述】：

我在 Extjs4 中工作，并且在如何捕获超链接上的事件时陷入困境。我研究了它，但无法解决它。

这是我的代码：

查看代码

Ext.define('AM.view.user.linkView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.Link',
    title: 'My Cool Panel',
    html: '<div><a href="#" id="linkId">This link will open a window</a></div><br /> <label for="myInput">Type here: </label><input name="myInput" type="text" value="" />',
});

控制器代码

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    stores: ['Users'],

    models: ['User','Book'],

    views: ['user.Edit', 'user.List','user.Create','user.linkView'],
    init: function() {
        this.control({
             'Link': {
                     afterrender: function(cmp)
                     {
                         Ext.get('#linkId').on('click', function(event, target) {
                            console.log(target);
                        }, this);
                     }
                 }
             });
        }
    });

当我运行上面的代码时，我得到了这个错误：

Uncaught TypeError: Cannot call method 'on' of null

我该如何解决这个问题？

【问题讨论】：

标签： hyperlink extjs4 extjs4.1 extjs-mvc

【解决方案1】：

将监听器更改为：

afterrender: function(cmp) {
    cmp.mon(cmp.getEl(), 'click', function(event, target) {
        console.log(target);
    }, this, {delegate: '#linkId'});
}

【讨论】：

但是为什么我不能使用 Ext.get("").on(---);
如果您只有一个 id=linkId 的元素，请使用 Ext.get('linkId') 而不是 Ext.get('#linkId')。如果您需要为多个元素设置一个侦听器，请使用委托。