Overriding back button in sencha app for Android

Question

While using a sencha touch app on Android, is it possible that the device back button behaves completely as it behaves for a native Andriod app? This thread addresses the same problem. The suggested solution is

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

    function onBackKeyDown(eve) {

        eve.preventDefault();

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

    }
}

but in this function, how can i go to the previously visited screen?

Answer 1

Of course it depends on how your user interface is built and how the views are connected. Simplest way I can think of is to detect somehow the presence of a back button in the page and trigger a click on it.

In my application each view that needs to handle the backbutton event has a button with cls = 'back' that implements a tap listener responsible of the logic to go back to the previous view.

About how to implement this logic: there is no magic wand for that. If a particular view can be reached through one and only one parent view, then you can hardcode it. Else, if a view can be reached from more than one, I save in a property of the view's controller a reference to the view which I came from, and then on backbutton's tap I move to that view.

The animation of moving to a view can usually be obtained by Ext.Viewport.animateActiveItem(parentView, {type: 'fade'}); (but again it depends on how you implemented your views tree)

So in my handler for the backbutton I check for such a button with [cls=back] (but you could also check for ui or whatever you want) and I fire the tap event on it. Moreover, when i detect I am on the root view I ask the user if he wants to exit the application and if so I call exit().

_handleBackButtonEvent : function(e) {

    // First look if the current view is the mainView
    var item = Ext.Viewport.getActiveItem();

    // If we are on mainView, quit.
    // Sayonara, goodbye, adios
    if (item.getId() === 'mainView') {
        navigator.notification.confirm(
            "Really quit?",
            function(option) {
                if (option == 1) {
                    navigator.app.exitApp();
                }
            }, 
            "Confirm", 
            "Yes,No"
        );
    } else {
        // else look if the current view has a backbutton
        var titlebar = item.down('titlebar[docked=top]');
        var backbutton = null;

        if (titlebar) {
            backbutton = titlebar.down('button[iconCls=back]');
        }

        if (backbutton && !backbutton.isHidden() && !backbutton.isDisabled()) {
            backbutton.fireEvent('tap');
        } else {
            // if not, fallback to mainView
            item = Ext.getCmp('mainView');
            Ext.Viewport.animateActiveItem( item, {type: 'slide', direction: 'right'});
        }

    }

    e.preventDefault();
}