Android back button click showing blank page - sencha-touch

Question

I am new to sencha. Almost spent 2 day to understand sencha routing/history support to implement android back button. but ended up with blank screen always although navigation is working. Please help me to find out what wrong am i doing or what is wrong with my application architecture.
app.js
Ext.application({
name: "WorkFlow",
models: [],
stores: [],
controllers: ["WFController"],
views: ["LoginForm","WorkList"],
launch: function () {
var loginForm = {
xtype: "loginform"
};
var workList = {
xtype: "worklist"
};
Ext.Viewport.add([loginForm,workList]);
// set up a listener to handle the back button for Android
if (Ext.os.is('Android')) {
document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false);
function onBackKeyDown(e) {
e.preventDefault();
// you are at the home screen
if (Ext.Viewport.getActiveItem().xtype == loginForm.xtype ) {
navigator.app.exitApp();
}else {
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'loginForm'
}));
}
}
}
}
});
LoginForm.js
var formPanel = null;
Ext.define("WorkFlow.view.LoginForm", {
extend: "Ext.form.Panel",
alias: "widget.loginform",
initialize: function () {
this.callParent(arguments);
formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'titlebar',
title: 'Login',
docked: 'top'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Username',
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password',
},
{
xtype: 'textfield',
name : 'deviceId',
label: 'Device Id',
}
]
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Login',
handler: this.onLoginTap,
scope: this
},
{
xtype: 'button',
text: 'Cancel',
handler: function() {
formPanel.reset();
}
}
]
});
},
onLoginTap: function() {
this.fireEvent("loginCommand", this);
},
});
WorkList.js
Ext.define("WorkFlow.view.WorkList", {
extend: "Ext.form.Panel",
alias: "widget.worklist",
config:{
html: 'This is worklist...',
}
});
WFController.js
Ext.define("WorkFlow.controller.WFController", {
extend: "Ext.app.Controller",
config: {
refs: {
loginForm: "loginform",
workList: "worklist",
},
control: {
loginForm: {
loginCommand: "onLoginCommand",
}
},
routes: {
'loginForm': 'activateLoginFormPage'
}
},
activateLoginFormPage: function(){
Ext.Viewport.animateActiveItem(this.getLoginForm(), this.slideRightTransition);
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
onLoginCommand: function () {
var values = formPanel.getValues();
window.plugins.AuthPlugin.authenticate(values.username,values.passwordvalues.deviceId,values,
function loginCallBack(result){
if(result=="PASSWORD_MATCH"){
loginForm.onLoginSuccess();
}
});
},
onLoginSuccess: function(){
this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
url: 'loginFormroute/workList'
}));
Ext.Viewport.animateActiveItem(this.getWorkList(), this.slideRightTransition);
},
launch: function () {
},
init: function () {
}
});

Answer 1

Not totally sure of what you are trying to accomplish, but if it is just regular navigation (press back to return to previous tab etc.) then you do not need to bind anything to the android back button. You should use routes and create a history item for every step the user takes.
Example: I have an app with two tabs, in one of the tabs there is a list of locations and in the second one there is a map with the same locations marked. Pressing on wither a list item or a location in the map generates the same details screen. So this is what I got to get this to work:
Routes:
routes: {
'tab/:tabId': 'gotoTab',
'details/:stnId': 'viewDetails'
},
Important part: ensure that you create history items for each step, I basically have two in this app, one for changing tabs and one for opening a details page.
So, tabs:
//If I change to the 'map' tab, it will navigate the browser to myapp.com/#tab/map
// and therefore creating a history item.
onTabpanelActiveItemChange: function(container, value, oldValue, options) {
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'tab/' + value.id
}), true);
},
Similar for my details page, only it is a function that is called from two seperate handlers (one for the list and one for the map):
showDetails: function(record, staticUrl, doUpdate) {
/*some logic stripped out*/
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'details/' + record.data.id
}), true);
}
After this you are more or less ready to go, if you can guarantee that users always start at the main page. If you enable deep-linking etc. than you will need to restore a state for those links. e.g. a #/tab/map/ link should open the app with the map tab active.
If we take my details page as an example, we have a few things to do. First of all re-create history (press back on details page returns to tab-list by default in my app) and then ensure that stores are loaded and so on.
So as a final example, my viewDetails route:
var store = Ext.StoreManager.get("dcStations");
//recreate history
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'tab/list'
}), true);
this.getApplication().getHistory().add(new Ext.app.Action({
url: 'details/' + stnId
}), true);
//make sure the store is loaded, then show the details page with passed id
store.on("load", function() {
this.showDetails(Ext.StoreManager.get("dcStations").getById(stnId));
}, this);
Hope that this boosts your efforts in getting started with routes and history management