Use setActiveItem method. You can use this method a couple different ways.

You can pass it a component instance or a config object. If it's a config object it will create an instance. If the component instance (created by passing an instance or if it was created via a config object) isn't an item then it will add the instance to the parent. Once that happens then it will make it the active item and display it.

Thanks for reply mitchell,

I am new to Sencha Touch, please kindly advise the following questions regarding to the setActiveItem():

1) As you mentioned, we may pass component instance or a config object to setActiveItem(), any performance difference regarding to such 2 approaches?

2) As you mentioned, we may pass a config object to setActiveItem(), in that case, does it mean that a NEW instance of the corresponding component will be created whenever calling setActiveItem(), any performance impact ?

3) Before passing component instance or a config object to setActiveItem(), is it necessary to destroy the current view ? My main concern is the performance and memory issue.

4) If my application contains for example, 10 views, 5 of them are more frequently viewed, and the rest are less frequently viewed, which of the following approach i should use, any difference in the performance/memory impact ?

Approach 1: Create ALL of the 10 views instance and add them all to the Viewport in app.js, and use setActiveItem( <index of active item> ) to show the releveant view instance when its being viewed.

Approach 2: Create the view instance only when it is being viewed and then pass it to setActiveItem() to show it