Search code examples
javascriptextjsextjs4extjs3

Removing event listeners added by class

I would like to understand how to remove the event listeners which are added by class as shown below (remove event for div#mainMenu)

enter image description here

I have tried all available methods but none to my avail. Also I dont see this issue in the extJS4.x version but only in 3.4 version. Any plain JS code to handle this?

Solution

  • Finally, I have figured out how to resolve this issue. The way to remove the listener is to go to parent div component & call removeAllListeners() method on the element. The element can be accessed in the afterRenderHandler function using this.el & then calling this.el.parent().removeAllListeners() so that it removes the un-required listeners interfering with the user experience. You could call the parent method in a chained fashion if the listener identified is a nth level parent (call the method n times).

    Ex: this.el.parent().parent().removeAllListeners()

    You could also try to access the element directly if you have the ID by calling: var el = Ext.get('mainMenu'); & then calling el.removeAllListeners();

    Similar approach can be applied to any other JS frameworks by getting a handle to the element having an issue with the listeners.