CODEWITHSUNDEEP
javascriptextjsdom-eventsjavascript-framework
jayesh
jayesh

Reputation: 2492

How to add click event on Extjs 4 label

I try to add click event on label in extjs4 but not working 

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

});

How to add event on a label?

Upvotes: 4

Views: 16540

Answers (6)

hijeane
hijeane

Reputation: 66

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

Upvotes: 4

Mahdi
Mahdi

Reputation: 9427

I'm working on an old code-base on top of ExtJS 3.4 and the following worked for me. I guess it should work for higher versions as well.

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!" );
           });
       }
    }
});

Upvotes: 1

Zon
Zon

Reputation: 19918

I like it shorter to get the idea quicker:

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

Upvotes: 0

user1346730
user1346730

Reputation: 165

Yep doesn't work for me either, tried all the examples...

check that, this worked

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

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

I am adding the ResetLabel to my panel.

Upvotes: 1

jayesh
jayesh

Reputation: 2492

this code is working in 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");
    });

});

Upvotes: 5

obenjiro
obenjiro

Reputation: 3760

try this:

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


});

Upvotes: 3

Related Questions