如何在 Extjs 4 标签上添加点击事件答案

【问题标题】：How to add click event on Extjs 4 label如何在 Extjs 4 标签上添加点击事件
【发布时间】：2011-11-17 17:58:26
【问题描述】：

我尝试在 extjs4 的标签上添加点击事件，但不起作用

Ext.onReady(function() {

    var ResetLabel = new Ext.form.Label({
        id:'ResetLabel',
        text: 'click it',
        renderTo : document.body                                

    });
    alert(Ext.getCmp('ResetLabel').id);

    Ext.getCmp('ResetLabel').on('click',function(){

        alert("message");
    });

});

如何在标签上添加事件？

【问题讨论】：

是否有任何 Javascript 错误？你能粘贴所有代码而不是几行吗？
我描述了在点击事件上也无法使用的代码，并且它没有给出任何错误

标签： javascript extjs dom-events javascript-framework

【解决方案1】：

这段代码在 Extjs 4 中工作

Ext.onReady(function() {

    var ResetLabel = new Ext.form.Label({
        id:'ResetLabel',
        text: 'click it',
        renderTo : document.body                                

    });
    alert(Ext.getCmp('ResetLabel').getEl());

    Ext.getCmp('ResetLabel').getEl().on('click',function(){

        alert("message");
    });

});

【讨论】：

【解决方案2】：

{ xtype: 'label', listeners: { element: 'el', click: function () { alert(); } } }

【讨论】：

【解决方案3】：

试试这个：

Ext.onReady(function() { 

var ResetLabel = new Ext.form.Label({ 
    id:'ResetLabel', 
    text: 'click it', 

listeners: {
   click: function(){ 
           alert("message"); 
       }
},

    renderTo : document.body                                 

}); 

alert(Ext.getCmp('ResetLabel').id); 


});

【讨论】：

【解决方案4】：

是的，对我也不起作用，尝试了所有示例...

检查一下，这行得通

    var ResetLabel = new Ext.form.Label({
        id:'ResetLabel',
        text: 'click it'

    });
    Ext.onReady(function() {
        Ext.getCmp('ResetLabel').getEl().on('click',function(){
            alert("message");
        });
    });

我正在将 ResetLabel 添加到我的面板中。

【讨论】：

【解决方案5】：

我正在开发基于 ExtJS 3.4 的旧代码库，以下代码对我有用。我想它也应该适用于更高版本。

new Ext.form.Label({
   "html": "Halp!",
   "listeners": {

       /* We are going to assing the click event right after the element has rendered */
       "afterrender": function () {

           this.getEl().on( "click", function () {
               console.log( "Clicked!" );
           });
       }
    }
});

【讨论】：

【解决方案6】：

我喜欢它更短，以便更快地获得想法：

// Adding abcent label event through its dom-structure:
myLabel.getEl().on(
  "click",
  onClickMyLabel);

【讨论】：