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