how to handle device back button on sencha touch application

Question

In Sencha touch if I use navigation view i can get back button. This is pretty fine.

But what if user hit device backbutton? it is direct exiting the applicaiton. In my requirement it should not exit the application it has to go back to previous screen.How can i do this?.

Answer 1

You can handle hardware back button like this:

if (Ext.os.is('Android')) {
    document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false);

    function onBackKeyDown(eve) {

        eve.preventDefault();

        //do something
        alert('back button pressed');

    }
}

Answer 2

I didn't find the instructions on the history support page that useful when trying to do this; I couldn't see anyway to use routes when dealing with a navigation view which can have a large stack of views on it at anytime.

If you just want the back button to work though, you can use the popstate and pushstate functions (see https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history for a reference). The idea is that you push a state when adding a view and pop it off when removing one. The physical back button on an Android phone, or the back button on a desktop browser effectively calls history.back(); so all you need to do is ensure that pressing the back button on the titlebar does the same, and it is that which triggers the nav view to pop.

To make use it work in Sencha Touch, I add the following to the main controller:

In refs I have references to the main view (an instance of Ext.navigation.View) and to its titlebar, from which you can hook onto the event of the back button e.g.:

refs: {
        main: 'mainview',
        mainTitleBar: 'mainview titlebar',
}...

I attach the following functions via the control config object..

 control: {
        main: {
            push: 'onMainPush'
        },
        mainTitleBar: {
            back: 'onBack'
        },
        ...

These are defined as:

  onMainPush: function(view, item) {
      //do what ever logic you need then..
      history.pushState();
  },
  onBack: function() {
      history.back(); //will cause the onpopstate event to fire on window..
      //prevent back button popping main view directly..
      return false;
  },

I then attach a function to execute when the state is popped via the init function of..

init: function() {
    /* pop a view when the back button is pressed
       note: if it's already at the root it's a noop */
    var that = this;
    window.addEventListener('popstate', function() {
        that.getMain().pop();
    }, false);
},

Now, pressing back on the titlebar, executes history.back(), this in turn fires the popstate event which then causes the main view to pop.

If you want to see this working on a real application, there is a (v. basic!) property finder app using this technique on github here.