Sencha Touch - Dipendenze

Ci sono alcuni modi definiti in Sencha Touch per dichiarare le dipendenze, una all'interno dell'applicazione e l'altra all'interno delle classi.

Diamo un'occhiata ai diversi modi per definire le dipendenze.

Dipendenze a livello di applicazione

Qui, dichiariamo tutte le dipendenze quando creiamo Ext.application.

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

Ora, quando l'applicazione viene caricata, tutte le dipendenze verranno caricate contemporaneamente. Il percorso degli altri file sarà:

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

Il modo di dichiarazione di cui sopra non solo carica il file, ma decide anche quale profilo deve mantenere attivo. Dopo aver caricato il controller, si assicura di istanziarlo. Una volta caricati i negozi, li istanzia e fornisce un ID se non è già stato fornito.

Dipendenze specifiche del profilo

Quando si utilizzano profili in un'applicazione, è possibile che poche funzionalità siano necessarie solo per alcuni profili specifici.

Le dipendenze specifiche del profilo vengono dichiarate nei profili stessi anziché nella dichiarazione a livello di applicazione.

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

Le dipendenze vengono caricate indipendentemente dal profilo attivo o meno. Tuttavia, in base al profilo attivo, vengono eseguite ulteriori elaborazioni come la creazione di istanze di controller e archivi.

Dipendenze annidate

Quando abbiamo un'applicazione più ampia, abbiamo più controller, modelli, visualizzazioni e negozi.

È sempre bene mantenere la modularità nelle applicazioni più grandi. Per questo, possiamo definire sottocartelle e durante la dichiarazione delle dipendenze possiamo usare il nome della sottocartella per dichiarare.

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

Nel caso precedente, verranno caricati i seguenti file:

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

Dipendenze esterne

Possiamo specificare le dipendenze al di fuori dell'applicazione fornendo nomi completi delle classi come -

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

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

Nel caso precedente, verranno caricati i seguenti file:

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