SenchaApp views navigation. Reuse views.

Hi all!

My projects is formed by 6 different windows or views, some of which are populated with some data retrieved from the Cloud, and some other static data. I kind of manage to create a working app, but I have many doubts on the regard of the navigation inside the app. For navigation I mean to change form one view to another. I am not sure if what I am doing is the right way. I would like to reuse as many views as I can in order to avoid a huge memory heap, and instanciate them correctly as well.

A simplified schema of what I need to implement will be the following. When I press NEXT I should load a view, and when I press BACK I should load the previous view. NEXT and BACK are buttons on my toolbar.

Untitled.png

What I have done so far is:

1. Declare all the three views in my app.js

views: ['A', 'B', 'C']

2. On the NEXT Button listener, the code will be something like (transition A to :

Code:

   var newView= Ext.create ('SenchaApp.view.B', { userId: 3030} );
        Ext.Viewport.add (newView);
        Ext.Viewport.animateActiveItem(newView, this.getSlideLeftTransition());

3. On the BACKButton listener, the code will be something like (transition B to A):

Code:

   var newView= Ext.create ('SenchaApp.view.A', { userId: 3030} );
        Ext.Viewport.add (newView);
        Ext.Viewport.animateActiveItem(newView, this.getSlideLeftTransition());

So here are my main doubts.

1. Is this way to instanciate the views correct? I mean is it a good practices to create a new view every time I need to move to other view? Is there a better way to do it?

2. Do I have to declare all my views in the app.js? What about the memory?

3. Is there any way to reuse the views?

Thanks for the help! I really appreciate it!