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

  • Z时代
  • 2024-01-10
  • 分类：问答

我使用NavigationView作为根面板。我试图完成的事情是在用户浏览我的应用程序时将视图推送到我的根面板上，并在用户返回时弹出它们。如何正确使用Sencha NavigationView，深层链接和浏览器历史

下面是一个简单的例子显示我的问题：我有一种类型的视图显示一些条目的细节。

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

我也有配置为监听下列路线的控制器：“进入/：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。另一种观点被推入堆栈，这也是预期的行为。现在，当我点击BROWSERS后退按钮时会出现问题。这将URL更改为index.html＃entry/1，并将另一个视图推送到我的堆栈。我想弹出视图而不是添加另一个视图。如果我按下工具栏后退按钮，视图就会按照我想要的方式弹出，但浏览器后退按钮不是这种情况。

我明白为什么会发生这种情况：Sencha触摸框架不知道URL更改是否是由于我按另一个链接使用与先前的浏览器历史URL相同的URL，或者如果我按了后退按钮我的浏览器。而且我所有的代码都知道，当它看到url更改为“entry /：id”时，应该将另一个视图推送到堆栈上。

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

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

任何关于该主题的帮助/讨论表示赞赏！

回答：

我有一个与NestedList组件类似的问题。我最终做的是重写onBackTap，取消它，然后重定向到适当的URL。我猜想还有一些方法可以将这种技术应用于NavigationView。我不知道这是否是正确的方式，但这是我能够通过硬件和软件后退按钮在一起播放的唯一方式。

回答：

您可以将这些行添加到您的导航视图definiton，

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

以上是 如何正确使用Sencha NavigationView，深层链接和浏览器历史 的全部内容， 来源链接： utcz.com/qa/257565.html

回到顶部