W aplikacji Ext JS 4 MVC, jaka powinna być odpowiedzialność za ładowanie sklepów?

Question

Rozważ złożoną aplikację, w której masz niestandardową logikę filtrowania i różne tryby ładowania; opóźnione ładowanie po ukryciu, brak obciążenia po ukryciu, ale ładowanie po wyświetleniu i ponowne ładowanie po zmodyfikowaniu niestandardowych filtrów itp.

Która część aplikacji mvc powinna być odpowiedzialna za ładowanie i jak połączyć to wszystko?

Answer 1

Nigdy nie znalazłem ostatecznej odpowiedzi na to pytanie od Sencha, gdy zaczynałem pracę z MVC, ale mogę powiedzieć, co robiłem dla kilku aplikacji z powodzeniem.

Tworzę i ładuję moje sklepy zgodnie z ich użyciem. To wydaje się być podzielone na trzy różne kategorie dla mnie:

1. sklepach, które mają zastosowanie do całej aplikacji

2. sklepach, które mają zastosowanie do wszystkich wystąpień widokiem

3. sklepach, które są związane z pojedynczy widok instancja

1. Sklepy TH na zastosowanie do całej aplikacji

zwykle mają „Main” kontroler, który obsługuje ramy mojej aplikacji, takie rzeczy nawigacji klawiatury głównego menu itp

sklepów, które należą do pierwszej kategorii powyżej przejdź do tablicy "Main" kontrolera stores. Jeśli te sklepy nie są zależne od innego sklepu, po prostu robię je autoLoad: true i robię z nimi. Ale w przypadkach, w których są one zależne od innego przechowywania danych, dodajemy detektor do magazynu nadrzędnego, aby załadować zależny sklep wewnątrz zdarzenia rodzica onLoad.

Przykładem niektórych sklepów, które znalazłem w tej pierwszej kategorii, są sklepy referencyjne, których używam w comboboxach w całej aplikacji, zwykle w wielu różnych typach widoków. Są one zwykle konfigurowane z autoLoad: true, a następnie nigdy nie ładuję ich ponownie dla sesji tego użytkownika.Za każdym razem muszę combobox który używa sklep odniesienia, mogę ustawić go tak:

{ 
    xtype: 'combobox', 
    allowBlank: false, 
    forceSelection: true, 
    store: Ext.getStore('SomeReferenceStore'), 
    queryMode: 'local', // this makes sure the store doesn't reload 
    valueField: 'id', 
    displayField: 'name' 
} 

Aby dać przykład dwóch sklepach, które oba należą do pierwszej kategorii, z których jedna jest zależny od drugiego:

W jednym z moich apps mam szereg dynamicznych uprawnień użytkownika, gdy użytkownik loguje się do aplikacji musiałem pobierać różne uprawnienia i modyfikować model User zawierać pole logiczną dla każdego z tych różnych uprawnień:

Ext.define('MyApp.controller.Main', { 
    extend: 'Ext.app.Controller', 

    models: [ 
     'User', 
     'Reference', 
     // etc... 
    ], 

    stores: [ 
     'CurrentUser', 
     'PermissionRef', // this is "autoLoad: true" 
     // etc... 
    ], 

    init: function() { 
     var me = this;  

     // update the user model and load the user 
     me.getPermissionRefStore().on('load', function(store, records) { 
      var model = me.getUserModel(), 
       fields = model.prototype.fields.getRange(); 

      // append the permissions onto the User model fields 
      Ext.each(records, function(permission) { 
       fields.push({ 
        name: permission.get('name'), 
        type: 'bool', 
       }); 
      }); 

      // update the user model with the permission fields 
      model.setFields(fields); 

      // load the current user 
      me.getCurrentUserStore().load(); 

      // other stuff... 

     }); 

     // other stuff... 

    } 

}); 

Z tym, ilekroć muszę odniesienie dla użytkownika i jakie uprawnienia ma on dostępny po prostu zadzwonić:

var user = Ext.getStore('CurrentUser').first(); 

Czasami widok będzie również uzależniona od sklepu jest załadowany. Na przykład moje główne pozycje menu zależą od tabeli bazy danych, w tym przypadku chciałbym to an onLoad słuchaczowi w ten sam sposób (wewnątrz init funkcji sterownika):

// create the menu once we know what menu items are available 
me.getMenuStore().on('load', function(store) { 
    me.getViewport().add(Ext.widget('mainpanel'));    
}); 

Sam MyApp.store.Menu zostanie skonfigurowany z autoLoad: true.

2. Sklepy, które mają zastosowanie do wszystkich wystąpień widokiem

utworzyć i załadować te, podobnie jak w pierwszej kategorii tylko umieścić je w konkretnym widzenia kontrolera stores tablicy zamiast „głównym” kontroler stores tablica.

To jest ta sama podstawowa koncepcja, niektóre są autoLoad: true niektóre nie są, jeśli zależą od danych innego sklepu.

Dla tych, które nie są autoLoad: true, są ładowane gdzieś wewnątrz funkcji kontrolera init lub w wyniku wywołania jakiegoś zdarzenia.

3. Stores, które są przywiązane do jednego widoku instancji

Tu mogę iść na przekór MVC, ale naprawdę nie ma lepszego miejsca do sklepu, który odnosi się do pojedynczej instancji zobacz wtedy wewnątrz samego widoku.

W większości przypadków nie umieszczam tych sklepów w tablicy kontrolerów widoku stores. Po prostu utworzę i załaduję je wewnątrz funkcji widoku initComponent. W wyniku tego, gdy widok zostanie zniszczony, nie ma już odniesienia do sklepu, więc sklep również zostanie zniszczony. Pomaga to zmniejszyć zasoby dla sklepów, które można utworzyć wiele razy.

Załóżmy na przykład, że masz MyApp.view.UnicornWeightGrid, który rozszerza gridpanel i pokazuje progresywną wagę jednorożca w miarę upływu czasu. Użytkownik może otworzyć UnicornWeightGrid dla wszystkich jednorożców w dziedzinie dla celów porównawczych i odsyłaczy. Będzie wiele różnych instancji modelu UnicornWeightStore, ponieważ istnieją instancje obiektu .

Widok można zdefiniować tak:

Ext.define('MyApp.view.UnicornWeightGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.unicornweight', 
    requires: [ 
     'MyApp.model.UnicornWeight' 
    ], 
    closable: true,  
    initComponent: function() { 
     var me = this; 

     me.store = Ext.create('Ext.data.Store', { 
      model: 'MyApp.model.UnicornWeight', 
      proxy: { 
       type: 'ajax', 
       url: 'unicorns/weight', 
       extraParams: { 
        name: me.unicornName 
       } 
      } 
     }); 

     me.store.load(); 
    }); 
}); 

Wtedy, gdy chcemy uzyskać inny UnicornWeightGrid możemy po prostu zadzwonić:

var grid = Ext.widget('unicornweight', { 
    unicornName: someUnicornNameVariable 
}); 

myTabPanel.add(grid); 

Wszelkie onLoad słuchaczy muszę o sklepach, które są zdefiniowane w widoku dołączam również do widoku. Więc nie potrzebuję nigdzie indziej referencji.

Przy tym wszystkim nie jest to jedyny sposób na skonfigurowanie swoich sklepów.

Stwierdziłem, że jest to najbardziej funkcjonalny sposób na obsługę sklepów w konsekwentnym tworzeniu kilku różnych aplikacji "MVC" ExtJS, ale czasami robię to inaczej także w "specjalnych" przypadkach.

Należy pamiętać, że "MVC" to dość luźny wzór, jest definiowany i wdrażany inaczej w prawie każdym używanym przeze mnie środowisku. Więc możesz zrobić cokolwiek, co działa najlepiej dla ciebie.

Answer 2

Powinieneś umieścić logikę, aby załadować sklep wewnątrz kontrolera dla siatki, która wyświetli ten sklep. Wstawiłem je do obsługi zdarzenia afterrender.