Sencha Touch - Dependencies

There are certain ways defined in Sencha touch to declare dependencies one with in the application other inside the classes.
Here we will see different ways to define dependencies.

Application level dependencies

In this when we create Ext.application that time itself we declare all the dependencies.

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

Now when your application gets loaded all the dependencies will be loaded as at the same time. The path of the other files will be as:
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 controller it makes sure to instantiate it, once the stores are loaded it instantiate them and provides one id if not already given.

Profile-specific Dependencies

When we are using profiles in application there may be possibilities that few functionalities are only required for some specific profile.
Profile specific dependencies are declared in the profiles itself instead of the application level declaration.

Ext.define('MyApp.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      views: ['StudentView'],
      controllers: ['StudentController'],
      models: ['StudentModel']
   }
});

Dependencies are getting loaded irrespective of the profile is active or not. But based on the active profile the further processing such as instantiating controller ans stores happens.

Nested Dependencies

When we have larger application we have multiple controllers, models, views and stores.
Its always good to keep modularity in larger applications, for that we can define sub folders and while declaring dependencies we can use subfolder name to declare.

Ext.application({
   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 application by giving fully qualified names of the classes as:

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

Ext.application({
   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