View Full Version : Problems in Optimizing Sencha Touch App

6 Jun 2011, 4:47 PM
Ok, so initially I was loading a bunch of Panels with lists a maps, etc in another panel with a card layout, now I have started to optimize the app as recomended to keep the DOM small and low memory footprint. So I am only creating the fist visible panel in the card layout and creating / destroyng panels as i need them. So basically is what I have is on the controller methods that respond to taps on my buttons I am instantiating views and setting the active card to those instance while at the same time, using the deactivate event of the panel to call their destroy method.

This works well the first time around, the problem is when I try to recreate an object that has been previously destroyed (like as in going back in the card sequence) it fails when i try to set it as the active card again, some message about the dom element is not valid (sorry I am not at home now).

Does anyone have a clue on what is going on, i suspect that what I am doing wrong is I am doing this actions (create/destroy) in the wrong event so things are being created and set active while other containers are being destroyed and this is mucking up the DOM, I have noticed that If I include a deffer execution to the destroy method it sort of behaves ok, meaning the objects are created etc, but after a while things start to go wrong like slide animations dont happen anymore, some card dont display at all, etc.

Any clue on this?


6 Jun 2011, 10:57 PM

no, unfortunately this seems to be a bug in sencha touch. It happens only with panels having docked items.

See http://www.sencha.com/forum/showthread.php?114218-OPEN-488-DockLayout-attempts-to-manipulate-DOM-element-after-it-s-been-destroyed

If you find a workaround, please report!


7 Jun 2011, 4:36 PM
Thanks for that...so what is the go, leave the optimizations aside? Dont destroy elements?

8 Jun 2011, 5:43 AM
Hi jmclem, I think there is a workaround for this problem, follow the link you suggested and check my example. Thanks for pointing me out that way. If you need a hand figuring out let me know. Thanks again and good luck

27 Jul 2011, 9:28 AM
I think this is one of the biggest performance issues, however I was doing the same thing as u said, destroying every element went off, and recreate it again, the problem is that u're doing a lot of things at the same time, dispatching, switching cards, destroying, reloading stores, and rebinding listeners, some unexpected behaviors might be caused by, deactivate event got fired before hide, duplicated elements ids, and listeners... the best thing to do is to keep every thing simple, destroy items only on back button clicked, and give the destroy a timeout to make sure animation is finished, dont use Ext.dispatch on back button handler, simply use layout.prev({right animation}) and destroy with timeout, minimize the use of hardcoded elements ids, and Ext.getCmp, minimize the object that u pass to controllers actions, assign listeners in controllers not in views so u can call the action directly without Ext.dispatch.... just try to make ur app simple as possible.... Use chrome Profile tab in developer tool, take memory usage snapshots before and after card switch and actions, record cpu usage to see which actions are taking more time

1 Aug 2011, 5:21 PM
Thanks for the excelent tips mate!!!