Javascript ExtJS4链接按钮组件

我正在尝试在ExtJS4中创建自己的LinkButton组件。没什么新鲜事吧

我的代码如下所示：

Ext.define('LinkButton', {
    extend: 'Ext.Component',
    xtype: 'linkbutton',
    autoEl: 'a',
    renderTpl: '<a href=\"javascript:;\">{text}</a>',
    config: {
        text: '',
        handler: function () { }
    },
    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        this.renderData = {
            text: this.getText()
        };

        var handler = me.getHandler();
        if (handler) {
            me.on('click', handler);
        }
    }
});

Ext.define（'LinkButton'{
扩展：“Ext.Component”，
xtype:'linkbutton'，
autoEl:'a'，
renderTpl:“”，
配置：{
文本：“”，
处理程序：函数（）{}
},
initComponent:函数（）{
var me=这个；
me.callParent（参数）；
this.renderData={
text:this.getText（）
};
var handler=me.getHandler（）；
if（处理程序）{
me.on（'click'，handler）；
}
}
});

到目前为止还不错！我的链接按钮看起来确实像一个超链接，我的文本内容在那里。优雅

但是，我不能让我的组件在我单击它时触发事件

这一行

me.on（'click'，handler）不工作！即使我将其从on更改为addListener，也没有效果

所以问题是：如何将DOM事件添加到组件中？或者，更好的是，如何访问自己组件的DOM元素？我没能做到这些

谢谢
 或者你可以这样做

afterRender : function() {
    this.callParent(arguments);

    this.mon(this.el, {
        scope : this,
        delegate : 'a',
        click : this.handleClick
    });
},

handleClick : function(e, t) {
    e.stopEvent();

    var handler = this.getHandler();
    if (handler) {
        handler();
    }
}

以下是我的建议，它基于
按钮
组件的源代码：

Ext.define('LinkButton', {
    extend: 'Ext.Component',
    xtype: 'linkbutton',
    autoEl: 'a',
    renderTpl: '<a href=\"javascript:;\" id="{id}-btnEl">{text}</a>',
    config: {
        text: '',
        handler: function () { }
    },
    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        this.renderData = {
            text: this.getText()
        };
    },
    onRender: function(ct, position) {
        var me = this, 
            btn;

        me.addChildEls('btnEl');

        me.callParent(arguments);

        btn = me.btnEl;

        me.mon(btn, 'click', me.onClick, me);
    },
    onClick: function(e) {
        var me = this;
        if (me.preventDefault || (me.disabled && me.getHref()) && e) {
            e.preventDefault();
        }
        if (e.button !== 0) {
            return;
        }
        if (!me.disabled) {
            me.fireHandler(e);
        }
    },
    fireHandler: function(e){
        var me = this,
            handler = me.handler;

        me.fireEvent('click', me, e);
        if (handler) {
            handler.call(me.scope || me, me, e);
        }
    }
});

Ext.define（'LinkButton'{
扩展：“Ext.Component”，
xtype:'linkbutton'，
autoEl:'a'，
renderTpl:“”，
配置：{
文本：“”，
处理程序：函数（）{}
},
initComponent:函数（）{
var me=这个；
me.callParent（参数）；
this.renderData={
text:this.getText（）
};
},
onRender：功能（ct、位置）{
var me=这个，
btn；
me.addChildEls（'btnEl'）；
me.callParent（参数）；
btn=me.btnEl；
me.mon（顺便说一句，“点击”，me.onClick，me）；
},
onClick：函数（e）{
var me=这个；
if（me.preventDefault | | |（me.disabled&&me.getHref（））&&e）{
e、 预防默认值（）；
}
如果（e.按钮！==0）{
返回；
}
如果（！me.disabled）{
消防队员（e）；
}
},
fireHandler:函数（e）{
var me=这个，
handler=me.handler；
me.firevent（'click'，me，e）；
if（处理程序）{
handler.call（me.scope | me，me，e）；
}
}
});

工作示例：
正确的方法是用于此类任务。有一个自定义html，允许您执行任何操作，同时Ext.Component的所有功能都可用。
这几乎是我在应用程序中所做的一切！我不熟悉
委托
属性，在文档中也没有看到它。它做什么呢？它接受一个元素的DOM选择器来激发监听器。因此，click listener将仅为匹配“a”选择器的元素激发。例如，如果标记有一个类链接，则可以使用“a.test”作为选择器。今天，我了解到我最初使用的audoEl配置由于模板中的a标记而导致双a标记。把它拿走就好了。