loading/switching child views inside main view in sencha touch 2

Question

I am creating a Sencha Touch app which has one main view with a left side panel and a top titlebar. In the middle I want to load different different views based on click on left side items. How can I achieve that? If I do Ext.viewport.add(view); it will add new view on top of my main view making main view's left panel not visible.

Thanks in advance

Answer 1

I have done this kind of thing before using the Navigation View - http://docs-origin.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.navigation.View

So you just push or pop views as you require so only one is visible at a time, you can still keep your side bar, and so when you click a side bar item you would perform the push as shown in the docs.

Answer 2

If you don't want to use an Ext.navigation.View an Ext.Container will be enough. Use its add() method to add a child, before adding items you could call removeAll() to remove the existing objects.

Anyway I don't see any reasons for not using Ext.navigation.View which handles for you the card layout and the animations.

You could use a layout like this:

MainView (Ext.Container) layout:hbox
  |_ TitleBar (Ext.TitleBar) docked:top
  |_ LeftPanel (Ext.Container) flex:1
  |    |_ (Ext.Button)
  |    |_ (Ext.Button)
  |_ ContentPanel (Ext.navigation.View) flex:2

You should push views on tap event of the LeftPanel buttons.