3

メインメニューを持つExtJs4アプリを作成する必要があり、各メニュー項目は異なるURLで新しいページを開く必要があるため、ユーザーがURLをコピーして他のブラウザータブに貼り付けると、アプリはそのメニュー項目を開く必要があります.

ExtJsが推奨するMVCアーキテクチャを使いたいのですが、複数のページ/URLでどう使えばいいのかわかりません。それらの例はすべて単一ページを使用しています。

1 つのオプションは、ユーザーが特定のメニュー アイテムをクリックするたびにページをリロードすることです。これにより、すべての URL/メニュー アイテム/ページが MVC を持つ個別の ExtJS アプリになります。しかし、このアプローチには欠点があると思います。ページが毎回リロードされ、パフォーマンスが良くないからです。また、コンポーネント (共通のモデル、異なるページのストア、およびビュー) の再利用が困難になります。

したがって、すべてのページに1つのアプリを使用したいのですが、ビューごとに異なるURLを使用する解決策があるかどうかはわかりません(私の場合:異なるメニュー項目)。

または、そのようなアプリケーションのための別のアプローチはありますか?

4

1 に答える 1

2

おそらくビューポートを使用し、中央領域をコンテナにしたいと思うでしょう。

センター リージョン コンテナは、通常、カードまたはタブ レイアウトを持ちます。

ユーザーが新しいビュー (コンポーネント) に移動したら、そのビューをコンテナーに追加してアクティブにします。

大きな間違いは、最初に URL を変更することです。あなたはそれをしたくありません。

ナビゲートして、ナビゲートが成功した場合は URL を設定します。ExtJS の History コンポーネントは正しく実装されていないため、おそらく使用しないでください。HTML5 pushState を使用することをお勧めします。

URL バーも変更せずに、ナビゲーション システムが機能することを確認する必要があります。

Microsoft Prism、WPF、Silverlight のナビゲーションに関するドキュメントが他にもあるので、それを読んで ExtJS に適用することをお勧めします。

http://msdn.microsoft.com/en-us/library/gg430881(v=pandp.40).aspx

ナビゲーション プロセスの例を次に示します。

  • app.requestNavigate('contacts/5');これを自分で追加します。

  • このフラグメントを次のように解析します。

navigationContext = {  
  fragment: 'contacts/5',  
  xtype: 'contacts-form',  
  parameters:{  
    id: 5  
  }  
}

オプション: フォームを使用する場合:

  • ナビゲーション リージョン (中央のリージョン) からアクティブなアイテムを取得します。存在する場合は、 を呼び出しますconfirmNavigationRequest(callback)。このメソッドまたはイベントを追加する必要があります。

  • の場合callback(true)は、ナビゲーションを続行します。これにより、フォームが「ダーティ」である場合、ユーザーはナビゲーションをキャンセルできます

終了オプション

  • 簡単な方法は、新しいwidgetを作成しnavigationContext.xtype、それをナビゲーション領域に追加してから、 を呼び出すことsetActiveItem(widget)です。以前のアクティブなアイテムが存在する場合は破棄します。

それから電話するhistory.pushState(null, null, navigationContext.fragment)

次に、ビューで「navigatedto」イベントを発生させ、コンテキストを渡すと、そこからデータをロードできます。

より高度なシナリオは次のとおりです。

  • 元のコンポーネントに戻ることが予想される場合は、前のコンポーネントを存続させます。keepAlive プロパティを追加し、true の場合、新しいコンポーネントをコンテナーに追加するときに破棄しません。

  • コンテナーを検索し、現在のナビゲーション リクエストを処理するかどうかを各コンポーネントに問い合わせます (たとえば、contact-5 で読み込まれたフォームがナビゲーション領域で既に非表示になっている場合、またはフォームを再利用する場合)。

于 2012-05-24T19:41:12.583 に答える