如何正確使用Sencha NavigationView，深層鏈接和瀏覽器歷史

我使用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是否與我的導航堆棧上的視圖相似，但我不確定是否需要這樣做。

任何關於該主題的幫助/討論表示讚賞！

來源

2012-06-10 jorgenfb

我有一個與NestedList組件類似的問題。我最終做的是重寫onBackTap，取消它，然後重定向到適當的URL。我猜想還有一些方法可以將這種技術應用於NavigationView。我不知道這是否是正確的方式，但這是我能夠通過硬件和軟件後退按鈕在一起播放的唯一方式。

來源

2012-08-01 02:30:22 jaeger

謝謝您的回答。這似乎是要走的路。 – jorgenfb

您可以將這些行添加到您的導航視圖definiton，

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

來源

2012-10-18 09:14:19 handet87

如何正確使用Sencha NavigationView，深層鏈接和瀏覽器歷史

回答

相關問題