ExtJS overwrite listener

Sometimes you need to overwrite an event listener in ExtJS. Usually listeners are registered like this:

var myStore = Ext.create("Ext.store.SimpleStore", {
    // ...
});

myStore.on('load', this.myFunction, this);

If this is the case, then to remove our previously registered listener, all we have to do is call un (which is an alias for removeListener):

myStore.un('load', this.myFunction, this);

But, what happens when you don't know what function is registered? Sometimes you will not have a reference to the original function that was registered. This situation may arise if there is code that exists in a different flow or may even come as a package! If that is true, the you may not be able to get a reference to the javascript function or edit the existing code. In this case, we will have to look at all of the functions that are registered for this event. We can then remove the listeners just for a certain event by calling clearListeners().

// code that you can't delete or change
Ext.Ajax.on('requestexception', function(cnn, response, options) {
    // the current handler code
});

// we can patch it by removing the listener and then adding our own
if (Ext.Ajax.events.requestexception) {
    Ext.Ajax.events.requestexception.clearListeners();
}

Ext.Ajax.on('requestexception', function(con, response, options) {
    // our own very important listener
});

And that's it! The only thing to remember here is that we may not want to remove all the listeners as we did here, because there could be more than one registered. The ideal solution would be to have the handler method be part of some singleton object, that way we can unregister just that function.