How to use Sencha NavigationView, deep binding and browser history

Question

I am using NavigationView as root panel. And what I'm trying to accomplish is to click views on my root panel when the user dives deeper into my application and pops up when the user returns.

Here are simple examples showing my problem: I have one view view showing some data about a record.

Ext.define('MyApp.view.EntryDetails', { extend: 'Ext.Panel', xtype: 'entrydetails', config: { tpl: '<div>{id}</div>' } }); 

I also have a controller configured to listen on the following route: "entry /: id" and click on the new entrydetails view on the navigation table (NavigationView) when that 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} }); } }); 

Ok, this works fine. Now let's first assume that I go to: index.html # entry / 1. This will push the new presentation onto the stack as I want. Then I click on another link index.html # entry / 2. Another view is pushed onto the stack; this is also the intended behavior. Now the problem occurs when I click the "BROWSERS back" button. This changes the url to index.html # entry / 1 and pops another view onto my stack. I wanted to expose the view instead of adding another. If I click the toolbar button, the view opens as I wanted, but this does not apply to the browsers return button.

I understand why this is happening: Sencha touch does not know if the URL change has changed by clicking another link with the same URL as the previous browser history URL, or if I click the back button on my browser. And all my code knows is that he should push another view onto the stack when he sees the URL change to "entry /: id".

What is the best way to solve this problem. How to determine that the back button of the browser has been pressed, and pop view from my navigation mode.

I thought about checking if the changed URL was a more detailed simulator in my navigation stack, but I'm not sure if this is the way to do it.

Any help / discussion on this topic is welcome!

Answer 1

I had a similar problem with the NestedList component. What I ended up doing was overriding onBackTap, canceling it, and then redirecting to the appropriate URL. I guess there is a way to apply this technique to NavigationView. I don’t know if this is really the right way to do this, but it was the only way I could get buttons with software and collaboration software.

Answer 2

You can add these lines to your navigation screen,

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