Sencha-touch-dependencies

提供:Dev Guides
移動先:案内検索

Sencha Touch-依存関係

Sencha Touchには、アプリケーション内とクラス内での依存関係を宣言する特定の方法が定義されています。

依存関係を定義するさまざまな方法を見てみましょう。

アプリケーションレベルの依存関係

ここでは、Ext.applicationを作成するときにすべての依存関係を宣言します。

Ext.application({
   name: 'MyApp',
   views: ['StudentsView'],
   models: ['StudentsModel'],
   controllers: ['StudentsController'],
   stores: ['StudentsStore'],
   profiles: ['Phone', 'Tablet']
});

これで、アプリケーションがロードされると、すべての依存関係が同時にロードされます。 他のファイルのパスは-

  • MyApp.views.StudentsView
  • MyApp.models.StudentsModel
  • MyApp.stores.StudentsStoreなど。

上記の宣言方法は、ファイルをロードするだけでなく、アクティブとして保持するプロファイルも決定します。 コントローラーをロードした後、それは必ずインスタンス化されます。 ストアがロードされると、ストアがインスタンス化され、まだ指定されていない場合は1つのIDが提供されます。

プロファイル固有の依存関係

アプリケーションでプロファイルを使用している場合、特定のプロファイルにのみ必要な機能がほとんどない可能性があります。

プロファイル固有の依存関係は、アプリケーションレベルの宣言ではなく、プロファイル自体で宣言されます。

Ext.define('MyApp.profile.Tablet', {
   extend: 'Ext.app.Profile', config: {
      views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
   }
});

依存関係は、アクティブであるかどうかに関係なくロードされます。 ただし、アクティブなプロファイルに基づいて、コントローラーとストアのインスタンス化などの追加処理が行われます。

ネストされた依存関係

より大きなアプリケーションがある場合、複数のコントローラー、モデル、ビュー、およびストアがあります。

大規模なアプリケーションでモジュール性を維持することは常に有効です。 そのために、サブフォルダーを定義し、依存関係を宣言しながら、サブフォルダー名を使用して宣言できます。

Ext.application({
   name: 'MyApp',
   controllers: ['Controller', 'nested.NewController'],
   views: ['class.Cview', 'SView']
});

上記の場合、次のファイルがロードされます-

  • MyApp.controllers.Controller
  • MyApp.controllers.nested.NewController
  • MyApp.Views.Sview
  • MyApp.Views.class.Cview

外部依存関係

クラスの完全修飾名を次のように指定することにより、アプリケーションの外部で依存関係を指定できます-

Ext.Loader.setPath({
   'Class': 'Class'
});

Ext.application({
   views: ['Class.view.LoginForm', 'Welcome'],
   controllers: ['Class.controller.Sessions', 'Main'],
   models: ['Class.model.User']
});

上記の場合、次のファイルがロードされます-

  • クラス/ビュー/LoginForm.js
  • クラス/コントローラー/Sessions.js
  • クラス/モデル/User.js
  • app/view/Welcome.js
  • app/controller/Main.js