View Full Version : how to destroy dom elements associated with Extjs component to avoid memory leaks?

29 Apr 2014, 6:27 AM
When moving from one page to another page, the dom elements related to the previous page extjs components are not getting destroyed that leads memory leaks in IE.  My Previous page has Ext.tree.TreePanel with contextmenu. I am using panel. removeAll(true) before loading a new page.But still i am getting memory leaks in contextmenu  dom elements. Any idea why this cause the memory leak?

29 Apr 2014, 3:12 PM
Are you destroying the context menu? removeAll won't destroy it unless it is a child item of the container.

Menus are a common source of leaks as they are automatically hidden but not destroyed.

You shouldn't need to explicitly destroy the elements so long as you destroy all the components. To track component leaks try using Ext.ComponentManager to monitor all the components that are currently in your app.

29 Apr 2014, 11:04 PM
Hey Skirtle,
Thanks a ton for the reply. In my application, on submitting a form, { containing many text, combo fields } the control stays in same page by reloading the page with all the fields and values to edit and save again. There many leaks are showing up for each element in the form. Can you guide me with the best practices to destroy the Components successfully.

Can you also provide any example using the ComponentManager to avoid leaks

Thanks again.

30 Apr 2014, 1:11 AM
All components must be destroyed. You can never rely on garbage collection because all components are registered with the ComponentManager.

By default, removing components from a container will destroy them and recursively destroy all child items.

Monitor this number to check how many components there are in your application:


If you see it gradually creeping up then you're leaking components. See the API docs for more on the properties and methods that let you find out which components they are.