Sencha Touch - Dependências

Existem certas maneiras definidas no Sencha Touch para declarar dependências, uma dentro do aplicativo e a outra dentro das classes.

Vamos dar uma olhada nas diferentes maneiras de definir dependências.

Dependências de nível de aplicativo

Aqui, declaramos todas as dependências quando criamos Ext.application.

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

Agora, quando o aplicativo for carregado, todas as dependências serão carregadas ao mesmo tempo. O caminho dos outros arquivos será -

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

A forma de declaração acima não apenas carrega o arquivo, mas também decide qual perfil ele deve manter ativo. Após carregar o controlador, certifique-se de instanciá-lo. Depois que os armazenamentos são carregados, ele os instancia e fornece um id, se ainda não tiver sido fornecido.

Dependências específicas do perfil

Quando estamos usando perfis em um aplicativo, pode haver a possibilidade de que poucas funcionalidades sejam necessárias apenas para algum perfil específico.

As dependências específicas do perfil são declaradas nos próprios perfis em vez da declaração do nível do aplicativo.

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

As dependências são carregadas independentemente do perfil estar ativo ou não. No entanto, com base no perfil ativo, ocorre o processamento adicional, como instanciar o controlador e os armazenamentos.

Dependências aninhadas

Quando temos uma aplicação maior, temos vários controladores, modelos, visualizações e armazenamentos.

É sempre bom manter a modularidade em aplicações maiores. Para isso, podemos definir subpastas e ao declarar as dependências podemos usar o nome da subpasta para declarar.

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

No caso acima, os seguintes arquivos serão carregados -

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

Dependências Externas

Podemos especificar as dependências fora do aplicativo, fornecendo nomes totalmente qualificados das classes como -

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

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

No caso acima, os seguintes arquivos serão carregados -

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