How to destroy an inactive view in Sencha Touch

Question

i stuck with a problem which is really important i guess. In a simple Sencha Touch App I have many views. My Mainview is a TabPanel with docking icons in the bottom. Sometimes in my App I switch to another views which are outside of the Tabpanel. I don't want the DOM to overload with views, i don't need anymore so i'm searching for a solution to destroy a view, when its inactive. I've tried this, while switching into another view in my controller:

this.getMainview().destroy();

It seems that the Mainview gets deleted but I get an error:

Uncaught TypeError: Cannot read property 'dom' of null

So i guess something's wrong with the .destroy() - Method or is there a better way to handle this problem?

Solution 1

Before moving to new view you can call bellow code to remove current view

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);  

or you can also provide item object instead ActiveItem

Solution 2

I've got stucked with this problem many times before. It seems that currently, there's no efficient and actually bug-free solution in Sencha Touch 2. When the view is added again at second time, that unpleasant error will show again.

A possible solution:

This code snippet:

your_container(your_container.getActiveItem(), false);

will not actually destroy your sub-component from memory but from the DOM. Later when you add it, there will be no error (as I've tested).

Hope it helps.