Back button support using routing in Sencha - html

Question

I am newbie to Sencha. Can anyone please explain how to support back button in android using Sencha touch2 Routing. I have gone through Sencha document, they explained there with senarios like "#products/123". But in my case only views get changed not url which is always like "../index.html".
Lets consider i have one login page. On login button tap it navigates to Home page. Now on device back button tap it should navigate back to login. So what format should i put inside route:{}.
Please anyone explain me with simple code.
Thanks in advance.

Answer 1

in your button actions you should redirect like this:
control: {
'button[action=login]' : {
tap: function() {
this.redirectTo('login');
}
}
Then add the route in your controller:
config: {
refs: {
main: 'main'
},
routes: {
'login': 'showLogin'
}
}
and finally in the showDetail function you make the view change, the url should show something like index.html#detail:
showLogin: function() {
this.getMain().push({
xtype: 'loginView'
});
}
I hope this helps!

Answer 2

After doing lot of Google search finally got the answer with proper example. So this is for reference http://thanksmister.com/?p_=336

Answer 3

You can also give yourself better control by defining the Back Button, as well as its references, instead of using the default.
Ext.define('Mov.view.BackButton', {
extend: 'Ext.Button',
alias: 'widget.backbutton',
config: {
hidden: true,
id: 'back',
ui: 'back',
text: 'Back',
backStack: {
}
},
addToBackStack: function(dispatchOptions) {
var found = false;
this.backStack.forEach(function(el) {
found = found || (Ext.encode(el) == Ext.encode(dispatchOptions));
});
if (!found) {
this.backStack.push(dispatchOptions);
}
this.show();
},
clearBackStack: function() {
this.backStack = [];
this.hide();
},
handler: function(button, event) {
var dispatchOptions = this.backStack.pop();
Ext.dispatch(dispatchOptions);
if(this.backStack.length === 0) {
this.hide();
}
}
});
Then on your app's navigation bar, you apply this widget. (onInitialize of initial view works well).
nav = this.getNavigationBar(),
nav.setBackButton(Ext.widget('backbutton'));
#jurodr has a nice example for routing, reference and control, which works well with this custom component.