6

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

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

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

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

我还有一个控制器配置为监听以下路由：“entry/:id”，并在此路由匹配时将新的 entrydetails 视图推送到导航堆栈（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 的变化是由于我按下了与以前的浏览器历史 url 相同的 url 的另一个链接，还是我按下了浏览器上的后退按钮。我的所有代码都知道，当它看到 url 更改为“entry/:id”时，应该将另一个视图推送到堆栈上。

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

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

感谢您就该主题提供任何帮助/讨论！

4

2 回答 2

2

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

于 2012-08-01T02:30:22.940 回答
1

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

initialize: function () {
    this.getNavigationBar().on({
        back: this.onBackButtonTap,
        scope: this
    });
},
onBackButtonTap: function () {
    this.pop();
    this.fireEvent('back', this);
    history.back();
}
于 2012-10-18T09:14:19.013 回答