In ExtJS, How to suddenly unbind when event fire?

Question

Goal is to show alert box only first time click.

Ext.getCmp('myBtn').on('click', function(){
    alert('Alert this message only in first click.');
    Ext.getCmp('myBtn').un('click', this); // my attempt, still not work
})

Thank you.

Answer 1

If you want an event to be triggered exactly once, use this:-

Ext.getCmp('myBtn').on('click', function(){
    alert('Alert this message only in first click.');
}, null, {single: true});

The {single:true} will make this anonymous function to be run exactly once after dispatched, so this should accomplish your requirement.

Note: The null is actually the useful scope changer. You might need this to change the scope in the anonymous function

Check out ExtJS Events @ http://docs.sencha.com/extjs/5.0.0/core_concepts/events.html

Also check the Event Options @ http://docs-origin.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.mixin.Observable-method-on

Happy ExtJS :)

Answer 2

Would it work if you named your anonymous function? Also, you can get reference to the button from the method call, so you do not need to use Ext.getCmp().

Ext.getCmp('myBtn').on('click', function handleClick(button, event){
    alert('Alert this message only in first click.');
    button.removeListener('click', handleClick);
})

Answer 3

Try working with a named function rather than anonymous function.

var myfunction = function() {

   alert('Alert this message only in first click.');
   Ext.getCmp('myBtn').un('click', myfunction);
}

Ext.getCmp('myBtn').on('click',myfunction);