SenchaTouch-依存関係

Sencha Touchには、依存関係を宣言するための特定の方法があります。1つはアプリケーション内で、もう1つはクラス内です。

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

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

ここでは、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']
});

上記の場合、以下のファイルが読み込まれます-

Class/view/LoginForm.js
Class/controller/Sessions.js
Class/model/User.js
app/view/Welcome.js
app/controller/Main.js