Back Button - Navigating through Viewport - sencha-touch-2

Question

I'am adding content to my application viewport like this:
Ext.Viewport.animateActiveItem(item, {transition})
I'am searching for a way to get "back" to the last view. Is that possible, or does the viewport destroy the last view?

Answer 1

Why not just use the built in history support? You can add an entry to the history object like so:
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'dashboard'
}));
Once you call that function, it will change the application's URL hash. You can grab the event by using routes in your controller... add it to the config like so:
config: {
routes: {
'dashboard': 'showDashboard'
},
control: {
//controls...
}
},
Sencha Touch will recognize the URL change and look to your routes to call a function like so:
showDashboard: function() {
Ext.Viewport.animateActiveItem(item, {transition});
},
Using this method, the native back button will take you back to the previous view, you can also call which view you want to go to etc... view the documentation on the history object here: http://docs.sencha.com/touch/2-0/#!/api/Ext.app.History

Answer 2

Why don't you use the Ext.Viewport.animateActiveItem() on your first panel then ?
I did it here : http://www.senchafiddle.com/#xTZZg
Hope this helps

Answer 3

Ext.app.Action is a private Sencha class so cannot be guaranteed to exist in future releases. A better way is replace ...
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'dashboard'
}));
with this ...
this.getApplication().redirectTo('dashboard');
You can also pass a Model object provided it implements a toUrl() method ...
this.getApplication().redirectTo(myModelObj);
If required, you can now just use the following to go back:
history.back();
Refer to the Touch History Guide:
http://docs.sencha.com/touch/2-2/#!/guide/history_support