How to destroy all the components in sencha touch application

Question

am using Senchatouch for my mobile application and am want destroy all my components of the application and refresh the application

Answer 1

I would prefer not to reload the whole app.

You might want to create a base container and fill this with all your items. At the point you want to destroy all components, simply destroy that container

var mainContainer = Ext.Viewport.add({xtype: 'container', itemId: 'mainContainer'});
mainContainer.add([allOtherItems]);
...
Ext.Viewport.down('.container[itemId=mainContainer]').destroy();

I would prefer to keep that mainContainer available at all time. So

MyApp.MainContainer = Ext.Viewport.add({xtype: 'container', itemId: 'mainContainer'});

Keeps it easier to add items over time.

Answer 2

You can reload application using below code so every component will destroy

window.location.reload();

Answer 3

In order to remove everything from the viewport, you can simply do that like this:

Ext.Viewport.removeAll();

After this, if you have login panel or main panel in your app, then you should add this like below:

Ext.Viewport.add(Ext.create('MyApp.view.Main')); // Here add the home page; either login or main page of your app