1. #1
    Sencha User
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
    michiel is on a distinguished road

      0  

    Default Attach onclick event to component

    Hi,

    I'm trying to do something rather simple, but I can't get it to work. It's such a simple thing that it's difficult to find topics on the forum about it.

    Anyway, I've got an element with xtype: 'component', and I want to attach an onclick event to it. I've tried two ways, but both are not working (Firebug doesn't return any errors).

    Code:
    {
    	id: 'forgot_pwd',
    	xtype: 'component', 
    	autoEl: { 
    		tag: 'div',
    		class: 'forgot_pwd',
    		html: Lng.Login.forgot_password
    	},
    	listeners: {
    		click: function() { alert('ok') }
    	}
    }
    and I also tried:

    Code:
    Ext.getCmp('forgot_pwd').on('click', function() { alert('ok') });
    Am I missing something here?

    Thanks, Michiel

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,589
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default

    I covered this just yesterday!

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    116
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default

    Code:
    {
    	id: 'forgot_pwd',
    	xtype: 'component', 
    	autoEl: { 
    		tag: 'div',
    		class: 'forgot_pwd',
    		html: Lng.Login.forgot_password
    	},
    	listeners: {
    		render: function(c){
    			c.getEl().on({
    				click: function() {
    					alert('ok');
    				}
    			});
    		}
    	}
    }
    or
    Code:
    Ext.getCmp('forgot_pwd').getEl().on('click', function() {
    	alert('ok');
    });
    (only valid after the component is rendered)

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,589
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default

    @OP, do you understand what you've just done after pasting that code in?

  5. #5
    Sencha User
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
    michiel is on a distinguished road

      0  

    Default

    Great, that works .. it makes sense yes, that you can only attach the listener after the element has been rendered.

    I was just searching Animals posts on the topic ..

    Thanks again, Michiel

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,589
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default

    And you're adding to the ELement, not the Component.

    Components don't relay DOM events unless they are adding value.

  7. #7
    Sencha User
    Join Date
    Aug 2007
    Posts
    100
    Vote Rating
    0
    michiel is on a distinguished road

      0  

    Default

    Ah ok .. thanks for that extra info Animal! I'll go and have a look at the docs again to get more detail on this subject, to understand it exactly.

    Michiel

  8. #8
    Sencha User
    Join Date
    Nov 2015
    Posts
    4
    Vote Rating
    0
    kalidas319 is on a distinguished road

      0  

    Default

    Thanks !!