Am I going at it the right way?

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.

I don't think you should be changing the active items on the Ext.Viewport. I try to stay away from using that and manipulating the views I specifically create. And yeah, the Kitchen Sink seems like the perfect example to get you started. Use the Main view as a parent that holds the sidebar, and the main-subview. In the Main controller you can then create and destroy the subviews when the views are changed with the sidebar. Also you should not use id's with your components and use itemId's to avoid duplicate id's when destroying/recreating instances.

Thanks for your input. I have made changes to my application to ensure markup is not being duplicate as it was and my application is working more like the Kitchen Sink application. My next task is understanding two things;

1. How to destroy items/views?
In my main view, I set an item as my container which will hold all my views.

Should I simply keep track of the items and instead of using 'add', I should use 'setActiveItem'? This question also leads me to my next question and something you pointed out.

2. How to properly identify components in order to get them call it's methods
To give you an example, the only way I have been able to access methods in my Main view is to give it an id so that I can at least do <pre>Ext.getCmp('main');</pre>. Without setting an id, I haven't been able to figure out how to do it.

Again, thanks for your input. My app is in a much better place right now.

I would only use setActiveItem if you are working with a limited amount of views. Adding more screens will likely slow the device down over time (more noticeable on the slower devices).

Look into using Controllers to store all your component references and functions/methods. Controllers make it easy to reference and control your components using the refs/control configs (you can even have a controller for each view if you wanted, but it would be best to group the major functionality).

In the Controller you can create references to your components by using an identifier - I use an itemId for consistence. You can also reference components using the down and up functions that come with components. So say you have a button with the itemId: 'loginButton' then you can reference it like:

Once you have references to your views, you can call the destroy() function when you are done with it, and then re-create another instance when needed. That should help keep your app speedy

I also suggest you try to stay away from using 'this' everywhere to avoid ambiguity when reading your code. I like to set var me = this; in my functions off the bat and then it helps when I may need to do something out of that function's scope.