使い方Sencha NavigationView、深いリンクとブラウザの履歴

Question

NavigationViewをルートパネルとして使用しています。私が達成しようとしているのは、ユーザが自分のアプリケーションをより深くナビゲートし、ユーザが戻ったときにそれらをポップするときに、ルートパネルにビューをプッシュすることです。

ここに私の問題を示す簡単な例があります：いくつかのエントリの詳細を示す1つのタイプのビューがあります。 「エントリ/：ID」、及び新しいentrydetailsはnavigationstack（NavigationView）このルートマッチ上に表示プッシュ

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

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

Iは、以下のルートをリッスンするように構成されたコントローラを有します。

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変更が行われたかどうかわかりません。私のブラウザ。そして、私のコードで知っているのは、 "entry /：id"へのurl変更を見たときに、別のビューをスタックにプッシュする必要があるということです。

この問題を解決する最良の方法は何ですか。ブラウザの戻るボタンが押されたことを検出し、ナビゲーションビューからの表示をポップする方法を教えてください。

私は、変更されたURLがsimularだったかどうかを確認することを考えました。これはナビゲーションスタック上のビューにはさらに下にありますが、それができるかどうかはわかりません。

トピックに関するご意見・ご感想はありがとうございます。

Answer 1

NestedListコンポーネントにも同様の問題がありました。私がやったことは、onBackTapをオーバーライドしてキャンセルし、適切なURLにリダイレクトすることでした。このテクニックをNavigationViewにも適用する方法がいくつかあります。これを実際に行う方法が正しいかどうかはわかりませんが、ハードウェアとソフトウェアのバックボタンをうまく組み合わせるための唯一の方法でした。

Answer 2

あなたのナビゲーションビューdefinitonにこれらの行を追加することができ、

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