3

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?

Community
  • 1
  • 1
Diffy
  • 2,339
  • 3
  • 25
  • 47

1 Answers1

2

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();
}
Andrea Casaccia
  • 4,802
  • 4
  • 29
  • 54
  • 'presence of back button' means i will have to use a navigation view for it? – Diffy Jun 17 '14 at 11:04
  • Nope. I'm going to explain my point further to make it clearer. – Andrea Casaccia Jun 17 '14 at 11:23
  • Is this button with iconCls=back controlled by sencha so that when we click on it, it will take us to the previous view without writing any logic for it? And can i make it invisible because i dont have such button in my app? – Diffy Jun 17 '14 at 12:12
  • No, it's up to you to implement the logic and yes, you can make it invisible, but then remove this check: `!backbutton.isHidden()` – Andrea Casaccia Jun 17 '14 at 12:14
  • But the main thing i wanted is the code for the back button when tap event is fired. How do i know which was the previous page visited? – Diffy Jun 17 '14 at 12:17
  • 1
    Editing my answer again. – Andrea Casaccia Jun 17 '14 at 12:23