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”时，应该将另一个视图推送到堆栈。

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

我已经考虑过检查更改的网址是否与导航堆栈中的视图相似，但是我不确定这是否是这样做的。

对此主题的任何帮助/讨论表示赞赏！

Answer 1

我在NestedList组件中遇到了类似的问题。我最终做的是覆盖onBackTap，取消它，然后重定向到适当的URL。我猜测有一些方法可以将这种技术应用到NavigationView。我不知道这是否真的是正确的方法，但这是我能够让硬件和软件返回按钮很好地协同播放的唯一方法。

Answer 2

您可以将这些行添加到导航视图定义

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

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

2 个答案: