Sencha Touch - Dependencies

There are certain ways defined in Sencha Touch to declare dependencies, one within the apppcation and the other inside the classes.

Let’s take a look at the different ways to define dependencies.

Apppcation Level Dependencies

Here, we declare all the dependencies when we create Ext.apppcation.

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

Now, when the apppcation gets loaded, all the dependencies will be loaded at the same time. The path of the other files will be −

MyApp.views.StudentsView

MyApp.models.StudentsModel

MyApp.stores.StudentsStore etc.

The above way of declaration not only loads the file, it also decides which profile it should keep as active. After loading the controller, it makes sure to instantiate it. Once the stores are loaded, it instantiates them and provides one id if not already given.

Profile-specific Dependencies

When we are using profiles in an apppcation, there may be possibipties that few functionapties are only required for some specific profile.

Profile specific dependencies are declared in the profiles itself instead of the apppcation level declaration.

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

Dependencies get loaded irrespective of the profile being active or not. However, based on the active profile, further processing such as instantiating controller and stores happens.

Nested Dependencies

When we have larger apppcation we have multiple controllers, models, views, and stores.

It is always good to keep modularity in larger apppcations. For that, we can define subfolders and while declaring dependencies we can use subfolder name to declare.

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

In the above case, following files will be loaded −

MyApp.controllers.Controller

MyApp.controllers.nested.NewController

MyApp.Views.Sview

MyApp.Views.class.Cview

External Dependencies

We can specify the dependencies outside the apppcation by giving fully quapfied names of the classes as −

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

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

In the above case, following files will be loaded −

Class/view/LoginForm.js

Class/controller/Sessions.js

Class/model/User.js

app/view/Welcome.js

app/controller/Main.js