如何正确使用Sencha NavigationView,深层链接和浏览器历史记录

Question

我使用NavigationView作为根面板.我试图完成的事情是在用户导航到我的应用程序更深处时将视图推送到我的根面板,并在用户返回时弹出它们.

这是一个显示我的问题的简单示例:我有一种显示一些条目详细信息的视图.

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

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

我还有一个配置为侦听以下路由的控制器:"entry /:id",并在此路由匹配时将新的entrydetails视图推送到navigationstack(NavigationView).

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}
        });
    }
});

好的,这很好用.现在让我们首先假设我导航到:index.html#entry/1.这将按照我的意愿将新视图推送到堆栈.然后我点击另一个链接index.html#entry/2.另一个视图被推入堆栈,这也是预期的行为.现在,当我单击"浏览器"后退按钮时,会出现问题.这会将url更改为index.html#entry/1并将另一个视图推送到我的堆栈.我想弹出一个视图而不是添加另一个视图.如果我按下工具栏后退按钮,则会按照我的意愿弹出视图,但浏览器后退按钮不是这种情况.

我确实理解为什么会发生这种情况:Sencha触摸框架不知道网址更改是否是由于我使用与之前的浏览器历史记录网址相同的网址按下另一个链接,或者我是否按下浏览器上的后退按钮.我的所有代码都知道,当它看到一个url更改为"entry /:id"时,应该将另一个视图推送到堆栈.

解决这个问题的最佳方法是什么.如何检测到按下浏览器的后退按钮并从导航视图中弹出一个视图.

我曾想过检查更改后的url是否与我的导航堆栈中的某个视图相似,但是我不确定这是否是这样做的.

欢迎任何有关该主题的帮助/讨论!

Answer 1

我对 NestedList 组件也有类似的问题。我最终所做的是覆盖 onBackTap，取消它，然后重定向到适当的 URL。我猜想也有某种方法可以将此技术应用于 NavigationView。我不知道这是否真的是正确的方法，但这是我可以让硬件和软件后退按钮完美配合的唯一方法。