ルート パネルとして NavigationView を使用します。そして、私が達成しようとしているのは、ユーザーがアプリケーションの奥深くに移動したときにビューをルート パネルにプッシュし、ユーザーが戻ったときにビューをポップすることです。
私の問題を示す簡単な例を次に示します。いくつかのエントリの詳細を表示する 1 つのタイプのビューがあります。
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 をクリックします。別のビューがスタックにプッシュされます。これも意図した動作です。BROWSERSの戻るボタンをクリックすると問題が発生します。これにより、URL が index.html#entry/1 に変更され、さらに別のビューがスタックにプッシュされます。別のビューを追加するのではなく、ビューをポップしたかったのです。ツールバーの戻るボタンを押すと、ビューは思い通りにポップされますが、ブラウザの戻るボタンには当てはまりません。
なぜこれが起こっているのか理解できます: Sencha touch フレームワークは、URL の変更が以前のブラウザ履歴 URL と同じ URL を持つ別のリンクを押したことが原因なのか、それともブラウザの戻るボタンを押したことが原因なのかわかりません。そして、私のコードが知っているのは、URLが「entry/:id」に変更されたときに別のビューをスタックにプッシュする必要があるということだけです。
この問題を解決する最善の方法は何ですか。ブラウザの戻るボタンが押されたことを検出し、ナビゲーション ビューからビューをポップするにはどうすればよいですか。
変更された URL がナビゲーション スタックのさらに下のビューに似ているかどうかを確認することを考えましたが、それがその方法であるかどうかはわかりません。
このトピックに関するヘルプ/ディスカッションは大歓迎です!