1

私のアプリケーションでは、すべての画面にトップバーとボトムタブバーがあります。したがって、ユーザーが特定のタブをクリックすると、画面の中央部分 (タブバーとツールバーは同じ) のみが変更されます。そこで、このタブバーとツールバーに共通のコードを書きたいと思います。では、これらの共通コードをどこに保管すればよいのでしょうか?? それはビューフォルダにありますか??

誰かがコードまたはサンプル プロジェクトを共有できる場合、それは私にとって役に立ちます。

前もって感謝します。

4

1 に答える 1

1

高度に最適化されたアプリケーションを構築しようとしているようです。

ベスト プラクティスは次のとおりです。

1) MainView.jsは次のようになります。

Ext.define('app.views.MainView', {
  extend: 'Ext.Container' // container is the best way almost time
  config: {
    layout: 'card' // just for example
    items: [
       {xtype: 'MainTopToolbar'},
       {xtype: 'DynamicView'},
       {xtype: 'MainTabBar'},
    ]
    // other configs go here...
  }
})

このステップの目的は、アプリケーションの全体的なレイアウトを定義することです。ご覧のとおり、これには 3 つの主要なコンポーネントが含まれています (2 番目のコンポーネントは動的であり、ユーザーの操作に応じて変更されます)。

2) MainTabBarなどのxtypesを定義します。

Ext.define('app.views.MainTabBar', {
  extend: 'Ext.TabBar',
  xtype: 'MainTabBar'.
  config: {
    docked: 'bottom',
    items: [
       // your tabs are defined here, see Ext.TabBar docs for more details
    ]
    // other configs go here...
  }
})

3) すべての xtypes 定義ファイルと MainView.jsをビューフォルダーに配置します。

4) app.jsで、呼び出しますExt.create('app.views.MainView');

この問題は非常に一般的で少し複雑ですので、時間をかけてブレインストーミングを行ってください。何か明確なことがあれば、教えてください。

于 2012-07-06T13:38:51.917 に答える