In my application, I have 3 main views. Login, Dashboard and Main. In both Login and Dashboard, the views are pretty straightforward where one view leads to another, via routes. In Main, I have roughly 20 possible views; think old school website where you have a sidebar with 20 links docked to the left and a right container for those links' content.

I am trying to setup my Main view to work like that. Sidebar updates the route, which loads the Main view and based on the route, loads the appropriate page in the container. What I just describes works, I can load the 20 views with the Sidebar correctly showing you what page you're on.
Code:
Ext.Viewport.setActiveItem({.....});
Where I am stuck/stumped/inexperienced is switching between the views in my Main view. I originally thought, when the route changes, Main would loads from scratch again but what's happening is when the route changes, Main is duplicating itself and my main container is loading on top of each other. Due to this duplication, I have not been able to figure out how to switch between the items.
Code:
view = Ext.Viewport.setActiveItem(route.id); view.show();
So I don't know;

1) if I simply need to find out how to properly set an item via an id so that I can manipulate it once it's been added to the viewport

2) how to avoid the duplication

3) if my current structure is the right way to go, I tried to look at the Kitchen Sink but there's defiantly something that I haven't look at.

4) should I just step 20 views similar to my Login and Dashboard views? My reason for 1 Main view was to avoid loading what's common in my 20 views, mainly, the sidebar navigation.

Thoughts?