Sencha Touch - Zależności
W Sencha Touch zdefiniowano pewne sposoby deklarowania zależności, jeden w aplikacji, a drugi w klasach.
Przyjrzyjmy się różnym sposobom definiowania zależności.
Zależności na poziomie aplikacji
Tutaj deklarujemy wszystkie zależności podczas tworzenia aplikacji Ext.
Ext.application({
name: 'MyApp',
views: ['StudentsView'],
models: ['StudentsModel'],
controllers: ['StudentsController'],
stores: ['StudentsStore'],
profiles: ['Phone', 'Tablet']
});
Teraz, gdy aplikacja zostanie załadowana, wszystkie zależności zostaną załadowane w tym samym czasie. Ścieżka do innych plików będzie miała postać -
- MyApp.views.StudentsView
- MyApp.models.StudentsModel
- MyApp.stores.StudentsStore itp.
Powyższy sposób deklaracji nie tylko ładuje plik, ale także decyduje o tym, który profil ma zachować jako aktywny. Po załadowaniu kontrolera upewnia się, że utworzy jego instancję. Po załadowaniu sklepów tworzy ich instancje i dostarcza jeden identyfikator, jeśli nie został jeszcze podany.
Zależności specyficzne dla profilu
Kiedy używamy profili w aplikacji, może istnieć możliwość, że kilka funkcji jest wymaganych tylko dla określonego profilu.
Zależności specyficzne dla profilu są deklarowane w samych profilach zamiast w deklaracji poziomu aplikacji.
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile', config: {
views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
}
});
Zależności są ładowane niezależnie od tego, czy profil jest aktywny, czy nie. Jednak na podstawie aktywnego profilu następuje dalsze przetwarzanie, takie jak tworzenie instancji kontrolera i sklepów.
Zależności zagnieżdżone
Kiedy mamy większą aplikację, mamy wiele kontrolerów, modeli, widoków i sklepów.
W większych aplikacjach zawsze dobrze jest zachować modułowość. W tym celu możemy zdefiniować podfoldery, a deklarując zależności możemy zadeklarować nazwę podfolderu.
Ext.application({
name: 'MyApp',
controllers: ['Controller', 'nested.NewController'],
views: ['class.Cview', 'SView']
});
W powyższym przypadku wczytane zostaną następujące pliki -
- MyApp.controllers.Controller
- MyApp.controllers.nested.NewController
- MyApp.Views.Sview
- MyApp.Views.class.Cview
Zależności zewnętrzne
Możemy określić zależności poza aplikacją, podając w pełni kwalifikowane nazwy klas jako -
Ext.Loader.setPath({
'Class': 'Class'
});
Ext.application({
views: ['Class.view.LoginForm', 'Welcome'],
controllers: ['Class.controller.Sessions', 'Main'],
models: ['Class.model.User']
});
W powyższym przypadku wczytane zostaną następujące pliki -
- Class/view/LoginForm.js
- Class/controller/Sessions.js
- Class/model/User.js
- app/view/Welcome.js
- app/controller/Main.js