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

Question

我使用 NavigationView 作为根面板。我试图完成的事情是当用户更深入地浏览我的应用程序时将 View 推送到我的根面板上，并在用户返回时弹出它们。

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

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

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

我还有一个 Controller 配置为监听以下路由:“entry/:id”，并在此路由匹配时将新的 entrydetails View 推送到导航堆栈 (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。这会将新 View 推送到堆栈上，就像我想要的那样。然后我单击另一个链接 index.html#entry/2。另一个 View 被插入堆栈，这也是预期的行为。现在，当我单击 BROWSERS 后退按钮时出现问题。这会将 url 更改为 index.html#entry/1 并将另一个 View 推送到我的堆栈中。我想弹出一个 View 而不是添加另一个 View 。如果我按下工具栏的后退按钮， View 会按照我的意愿弹出，但浏览器的后退按钮并非如此。

我确实理解为什么会发生这种情况:Sencha touch 框架不知道 url 更改是由于我按下了与上一个浏览器历史记录 url 具有相同 url 的另一个链接，还是我按下了浏览器上的后退按钮。我的所有代码都知道，当看到 url 更改为“entry/:id”时，应该将另一个 View 推送到堆栈上。

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

我曾考虑检查更改后的 url 是否与导航堆栈上的 View 类似，但我不确定这是否是这样做的方法。

感谢有关该主题的任何帮助/讨论!

Answer 1

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