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