- Sencha Touch Tutorial
- Sencha Touch - Home
- Sencha Touch - Overview
- Sencha Touch - Environment
- Sencha Touch - Naming Convention
- Sencha Touch - Architecture
- Sencha Touch - MVC Explanation
- Sencha Touch - First App
- Sencha Touch - Build Application
- Sencha Touch - Migration Steps
- Sencha Touch - Core Concepts
- Sencha Touch - Data
- Sencha Touch - Theme
- Sencha Touch - Device Profile
- Sencha Touch - Dependencies
- Environment Detection
- Sencha Touch - Events
- Sencha Touch - Layout
- Sencha Touch - History & Support
- Sencha Touch - Upload & Download
- Sencha Touch - View Components
- Sencha Touch - Packaging
- Sencha Touch - Best Practice
- Sencha Touch Useful Resources
- Sencha Touch - Quick Guide
- Sencha Touch - Useful Resources
- Sencha Touch - Discussion
Sencha Touch - Dependencies
There are certain ways defined in Sencha Touch to declare dependencies, one within the application and the other inside the classes.
Let’s take a look at the different ways to define dependencies.
Application Level Dependencies
Here, we declare all the dependencies when we create Ext.application.
Ext.application({ name: 'MyApp', views: ['StudentsView'], models: ['StudentsModel'], controllers: ['StudentsController'], stores: ['StudentsStore'], profiles: ['Phone', 'Tablet'] });
Now, when the application 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 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 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 application we have multiple controllers, models, views, and stores.
It is always good to keep modularity in larger applications. For that, we can define subfolders 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
To Continue Learning Please Login
Login with Google