Memory Issues with MultiSelect/ItemSelector Component
I know that the disclaimer on the classes MultiSelect and ItemSelector classes in the examples directory says they are still to be treated as an example, but this is also an public extension (and an excellent one) as well, so at the very least, I wanted to bring up a problem with memory that I am having, and maybe get some help resolving it. FYI, I am using Ext 2.2.1, and the browser I am recreating the problem in is IE-7 (surprise).
I am using the ItemSelector in a form that is rendered in a TabPanel, and the user can add a new tab with a new instance of the form for each tab. When the tab is closed, I remove the tab, but when observing the behavior in Sieve, I end up with lots of orphaned elements related to the created panel and its containing form and elements. If I comment out the ItemSelector, the issue largely goes away, hence my assumption that it is related to the ItemSelector. Since my application is a "single page application" the memory cost for complicated panels gets pretty hefty when the user runs the application for an hour or two.
I have reduced the problem down to a simple example which can be dropped into the multiselect directory of the Ext examples. See the attached file called test_orphan.html.
To reproduce the problem, perform the following steps:
Open test_orphan.html in Sieve. Press the "Show in Use" button to view the DOM nodes in Use dialog.
Press add tab about 3 times, creating 3 tabs. Press "Show in Use" button in the "DOM Nodes in Use" dialog again. To make it easier to view the results, I created readable ids for the form elements and such. Press the ID column so that elements are sorted in reverse order. You'll see something like tab_panel_NEW_TAB-## for the id of the tab, as well as ids for the various form elements.
Now, close the tabs, then press the "Show in Use" button again. You'll see the elements related to the created tabs and forms are all orphaned.
If you go into the test_orphan.html file and at line 70 comment out the itemselector component from the form, and repeat the steps above, the tabs and containing components are being freed.
I have read a number of posts related to memory management, so I started digging into the ItemSelector component. Here are some changes I have attempted:
I noticed that even though destroy was being called on the ItemSelector, it was not destroying any of the dynamic DOM components it was creating. For example, even thought the Ext.ux.DDView class has a destroy function, it was never being called. This is referenced in the ItemSelector through the from/to MultiSelect objects to which it is referencing. So, I added an override to the MultiSelect and ItemSelector classes to implement the onDestroy method and clean up the portions of the DOM that are created in the corresponding render methods, includeing the Ext.ux.DDView class. The destroy method is now being called, but this did not alleviate the problem.
The ItemSelector anonymously creates a panel to which it renders, I also explicitly destroy this in the onDestroy methods.
There are some other components being created here, but you get the picture. As of yet, nothing seems to solve the problem. I have also attached my modified versions of the MultiSelect.js and ItemSelector.js with this post. Any changes I have made have been marked with the comment "// BEGIN_ADDED" and "// END_ADDED".
Any help in shedding light on this problem is appreciated.
Last edited by mystix; 19 Mar 2009 at 4:23 AM.
Reason: moved to 2.x Help from Open Discussion