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?

Answer 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

Answer 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.

Answer 3

I'll expose my situation and how I solved it.

I have a TabPanel with icons. One of those tabs shows a List of items. When you click on an item you're taken to a new Panel that shows its description. If you click a Back button, that Panel is destroyed and you return to the List. This way you destroy the "description" Panel which is unused now.

So what I did was creating a function to instantiate the Description Panels depending on the index of the Item clicked:

function project(i) {
    var v;
    switch(i) {
        case 0:
            v = Ext.create( 'Ext.Panel', {
                title: 'title',
                layout: { type: 'fit' },
                id: 'project0',
                iconCls: '',
                style: '',
                html: 'my html'
                });
            break;
    }
    return v;
}

Now, in the 'itemtap' event of the List I have this:

var lastItem = container.add(project(i));
itemsList.hide(); //hide the List and display only the new Panel in the container

Now, I have a button in the header to return to the previous View (i.e. the List), and this is the event 'tap' of that button:

container.remove(lastItem, true); //hide and destroy it
itemList.show(); //show the List again

So if I go back and forth between the List and the Description items (Panels) now there is no problem as I get a new instance everytime I clicked on them and likewise it gets destroyed when I return.

That solved my problem.