PDA

View Full Version : iterating items in a container and calling remove vs removeAll



jhooper
12 Apr 2010, 12:21 PM
afternoon,

I am currently working on a large one page app that is having some memory issues.
It seems that when iterating through the items in a container and calling remove on them, that not all of the added components are actually removed from Ext.ComponentMgr. I check this by calling Ext.ComponentMgr.all.items.length before and after removing everything from a container and adding it back. The number of components continues to increase with each click of the navigation.

After reviewing the code that removes the items, I decided to use the removeAll function instead of manually looping through each item calling remove.

This greatly reduced the number of components added with each navigation click. Why does this have such a profound impact?

What purpose does the this.initItems() function call have in the removeAll function? It seems that it ensures there is an instance of a layout object, but how does that make it remove everything better?

note that I was unable to reproduce this issue without the use of our user extensions. These user extensions are rather large and complex with many dependencies. which makes it rather impractical to post. If necessary, I can spend more time trying to create a simple example to show this issue, but Im hoping that someone can answer why this.initItems() must be called. Hopefully this is not merely for undefined JavaScript errors.

Even after this fix there are still a great number of components that are not being destroyed. Is there a better method of ensuring that everything that gets created for a particular section of the website actually gets destroyed after navigating to another section?

Looping code:


//clear the container
var tempContainer = Ext.getCmp('centerPanel');
if(tempContainer.items){
tempContainer.items.each(function(item, index, length){
try{
tempContainer.remove(item, true);
}catch(e){}
});
}
//make sure the container is cleared
tempContainer.getEl().child('.x-panel-body').update('');
removeAll code:


var tempContainer = Ext.getCmp('centerPanel');
tempContainer.removeAll(true);
//make sure the container is cleared
tempContainer.getEl().child('.x-panel-body').update('');
thanks in advance,
jake

boofman15
19 Jan 2012, 9:01 AM
I know this post was from a while back. Did you come to any conclusions regarding your questions?

I am trying to determine the best way to clean up components and would appreciate any advise.

thanks!

roshan.khandelwal
3 Oct 2014, 11:46 AM
Responding to a very old thread . But i recently came across the same problem in removing rows from grid .
So i was using the 'CheckboxModel' and selected multiple rows and then on a button click had to remove all of these rows .
And i tried with iterating and removing the rows . Turns out only half of them were removed . The other half stayed put .
Then i tried using a different approach . I collected all the indexes of the rows and then removed them all at once and this worked fine .

My idea would be that to save memory and computation , there is an index set , which goes over as we iterate . So instead of always starting from the top , it remembers its position .
Now when i am iterating and removing the elements , the index somehow loses track and so you end up either deleting the wrong fields or not at all .