How to do use Sencha NavigationView, deep linking and browser history properly

Question

I use a NavigationView as the root panel. And the thing I try to accomplish is to push views onto my root panel as the user navigates deeper into my application, and pop them of when the user goes back.

Here is a simple examples showing my problem: I have one type of view showing some entry details.

Ext.define('MyApp.view.EntryDetails', {
    extend: 'Ext.Panel',
    xtype: 'entrydetails',

    config: {
        tpl: '<div>{id}</div>'
    }   
});

I also have a controller configured to listen to the following route: "entry/:id", and push a new entrydetails view onto the navigationstack (NavigationView) when this route matches.

Ext.define('MyApp.controller.EntryDetails', {
    extend: 'Ext.app.Controller',
    config: {
        routes: {
            'entry/:id': 'showEntry'
        },
        refs: {
            navview: 'mynavigationview'
        },
    },

    showEntry: function(id){
        this.getMain().push({
            xtype: 'entrydetails',
            data: {id:id}
        });
    }
});

Okay, this is working fine. Now lets first assume I navigate to: index.html#entry/1. This will push a new view onto the stack, just as I want. I then click another link index.html#entry/2. Another view is pushed onto the stack, this is also the intended behavior. Now the problem appears when I click the BROWSERS back button. This changes the url to index.html#entry/1 and pushes yet another view onto my stack. I wanted to pop a view instead of adding another. If I press the toolbars backbutton the view is popped just as I wanted, but this is not the case with the browsers back button.

I do understand why this is happening: The Sencha touch framework do not know if the url change was due to me pressing another link with the same url as the previous browser history url, or if I was pressing the back button on my browser. And all my code knows is that is should push another view onto the stack when it sees an url change to "entry/:id".

What is the best way to solve this problem. How do I detect that the back button of the browser was pressed and the pop a view from my navigationview.

I have thought of checking if the changed url was simular to a view further down on my navigation stack, but I'm not sure if that's the way to do it.

Any help / discussion on the topic is appreciated!

Answer 1

I had a similar issue with the NestedList component. What I ended up doing was overriding the onBackTap, canceling it, and then redirecting to the appropriate URL. I'm guessing there is some way to apply this technique to the NavigationView as well. I don't know if this actually the right way to do it, but it was the only way I could get the hardware and software back buttons to play nicely together.

Answer 2

You can add these lines to your navigation view definiton,

initialize: function () {
    this.getNavigationBar().on({
        back: this.onBackButtonTap,
        scope: this
    });
},
onBackButtonTap: function () {
    this.pop();
    this.fireEvent('back', this);
    history.back();
}