Recommended way to add/remove items from a Ext.Container in Sencha Touch 2?

Question

I am optimizing my application. Originally, it's a Ext.TabPanel but I decided to use only a Ext.TabBar docked at the bottom and change the views above, so it requires a lot of add/remove actions from my main Ext.Container.

So my question is: in what way I should do to add/remove items from my Ext.Container effectively? I mean: fast, not cause memory-leaks, and also, not cause error like this: the view with a button in it, firstly added, all handlers (which are define through refs and control in a controller) work well but the second time (i.e it's removed and added again later), all handlers die.

Thanks in advance!

Solution

You have to ensure that you destroy the panel is destroyed otherwise it would be sitting in the dom.

Generally to remove a component from a container you use the Container remove() function which takes in the first parameter as the item to be removed and the second one is a boolean which instructs for it to be destroyed or not. You should ensure you set it to true to make sure you keep your DOM as lean as possible. Unless you're going to be reusing that component in the near future and do not want to render it again, then you do not need to destroy it.

http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-remove

Comments

[Thiem Nguyen]

thanks for your answer. If I call myContainer.remove('item_id',false), it will be faster when I call add() again since the item has not been destroyed yet, right?

[stan229]

Yes, that's why they give you the ability to destroy it or not. Note the container also has an autoDestroy property (default true) that is read if you do not pass anything into the second parameter

[Thiem Nguyen]

but when I don't try to destroy my "removed" items, will it be slower for searching through the DOM in other actions?

[stan229]

When you do not destroy them there will be a stub still sitting on the DOM, I'm not sure if it's the whole component (most likely) or just a placeholder. As you may be aware the DOM is the slowest part of the browser so especially for mobile applications we like to try to keep it as lean as possible. There are some best practices as in when to remove something versus hiding it versus destroying it all together. If you are frequently changing panels on a tabbar, you might be better off only hiding the panels and not doing a full remove because the user can switch back frequently.