Sencha Touch - Dependencias

Hay ciertas formas definidas en Sencha Touch para declarar dependencias, una dentro de la aplicación y la otra dentro de las clases.

Echemos un vistazo a las diferentes formas de definir dependencias.

Dependencias de nivel de aplicación

Aquí, declaramos todas las dependencias cuando creamos la aplicación Ext.

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

Ahora, cuando se cargue la aplicación, todas las dependencias se cargarán al mismo tiempo. La ruta de los otros archivos será:

• MyApp.views.StudentsView
• MyApp.models.StudentsModel
• MyApp.stores.StudentsStore etc.

La forma de declaración anterior no solo carga el archivo, también decide qué perfil debe mantener como activo. Después de cargar el controlador, se asegura de crear una instancia. Una vez que se cargan las tiendas, las instancia y proporciona una identificación si aún no se ha proporcionado.

Dependencias específicas del perfil

Cuando estamos usando perfiles en una aplicación, puede haber posibilidades de que solo se requieran pocas funcionalidades para algún perfil específico.

Las dependencias específicas del perfil se declaran en los propios perfiles en lugar de la declaración de nivel de aplicación.

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

Las dependencias se cargan independientemente de que el perfil esté activo o no. Sin embargo, según el perfil activo, se produce un procesamiento adicional, como la creación de instancias del controlador y las tiendas.

Dependencias anidadas

Cuando tenemos una aplicación más grande, tenemos varios controladores, modelos, vistas y tiendas.

Siempre es bueno mantener la modularidad en aplicaciones más grandes. Para eso, podemos definir subcarpetas y al declarar dependencias podemos usar el nombre de la subcarpeta para declarar.

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

En el caso anterior, se cargarán los siguientes archivos:

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

Dependencias externas

Podemos especificar las dependencias fuera de la aplicación dando nombres completos de las clases como:

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

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

En el caso anterior, se cargarán los siguientes archivos:

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