title: Android back button click showing blank page
body: <p>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.</p>
  
  <p>app.js</p>
  
  <pre><code>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'
                    }));
                }
            }
         }
  
      }
  });
  </code></pre>
  
  <p>LoginForm.js</p>
  
  <pre><code>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);
      },
  
  });
  </code></pre>
  
  <p>WorkList.js</p>
  
  <pre><code>Ext.define("WorkFlow.view.WorkList", {
      extend: "Ext.form.Panel",
      alias: "widget.worklist",
     config:{
     html: 'This is worklist...',
  
     } 
  });
  </code></pre>
  
  <p>WFController.js</p>
  
  <pre><code>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 () {
      }
  });
  </code></pre>