在Ext JS 4 MVC應用程序中，應該爲裝入商店負責什麼？

Question

考慮一個複雜的應用程序，您可以在其中定製過濾邏輯和不同的加載模式;隱藏時延遲加載，隱藏時不加載，但在顯示時加載，當您的自定義過濾器被修改時重新加載等。

什麼部分的mvc應用程序應負責加載，以及如何連接它？

Answer 1

當我開始使用MVC時，我從來沒有在Sencha上找到一個明確的答案，但我可以告訴你我爲幾個應用程序成功地做了些什麼。

我根據它們的使用方式創建並加載我的商店。這似乎分爲三個不同的類別對我來說：適用於整個應用程序，適用於被捆綁到一個視圖的所有實例

房屋

房屋

1. 商店單個視圖實例

1.商店第在適用於整個應用程序

我通常有一個「主」控制器來處理我的應用程序的框架，像鍵盤導航，主菜單等

存儲落入第一類以上進入這個「主」控制器的stores陣列。如果這些商店不依賴於另一家商店，那麼我只需將它們製作成autoLoad: true，然後完成它們。但是在他們依賴於其他商店數據的情況下，我會向父商店添加一個監聽器，以便在父代的onLoad事件中加載相關商店。

我發現屬於第一類的一些商店的示例是我在整個應用程序中使用的組合框中的參考商店，通常用於許多不同類型的視圖。這些通常配置爲autoLoad: true，然後我再也不會爲該用戶的會話加載它們。每當我需要使用參考商店的組合框，我可以將它設置這樣的：

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

爲了讓兩家店，這兩個屬於第一類，一個是依賴於其他的例子：

以我的應用程序之一我有用戶權限的動態數，當用戶登錄到應用程序我需要取不同的權限和修改User模型以包括一個布爾字段對於每個這些不同的權限的：

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... 

    } 

}); 

有了這個，每當我需要將用戶和權限參考他提供我只需撥打：

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

有時觀點也將取決於被加載的商店。例如我的主菜單項都受到一個數據庫表來確定，在這種情況下，我會包括onLoad聽衆以同樣的方式（控制器的init函數內部）：

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

的MyApp.store.Menu本身將與autoLoad: true進行配置。適用於視圖

我創建的所有實例，並加載這些就像第一類

2.房屋只有我把它們放在特定視圖控制器的stores陣列，而不是「主」的控制器stores數組。

然後它是相同的基本概念，有些是autoLoad: true有些不依賴於另一家商店的數據。

對於那些不是autoLoad: true的人，它們會在控制器的init函數內部某處被加載，或者作爲某個事件被觸發的結果。

3.房屋被束縛在單一視圖例如

在這裏，我可以違背MVC糧食，但真的是適用於一個單一實例存儲中沒有更好的地方然後在視圖內部查看。

在大多數情況下，我甚至不把這些商店放在視圖控制器的stores數組中。我只是在視圖的initComponent函數中創建並加載它們。因此，當視圖被破壞時，沒有更多的商店參考，因此商店也將被銷燬。這有助於減少可能多次創建的商店的資源。

例如，假設您有一個MyApp.view.UnicornWeightGrid，它可以延伸gridpanel並顯示隨着時間的推移，獨角獸的重量逐漸增加。用戶可以打開一個UnicornWeightGrid爲所有領域的獨角獸比較和交叉引用的目的。 UnicornWeightStore將有許多不同的實例，因爲有UnicornWeightGrid的實例。

視圖可以定義是這樣的：

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(); 
    }); 
}); 

然後，每當我們想要得到一個不同的UnicornWeightGrid，我們可以簡單地調用：

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

myTabPanel.add(grid); 

任何onLoad聽衆我需要定義的店在一個視圖中，我也附加在視圖內。所以我並不需要其他地方的參考。

儘管如此，這絕不是設置您的商店的唯一方法。

我發現這是在創建幾個不同的ExtJS「MVC」應用程序時始終如一地處理商店的最實用的方法，但我有時也會在「特殊」情況下以不同方式執行此操作。

您應該記住，「MVC」是相當寬鬆的設計模式，它在幾乎每個我用過的框架中都有不同的定義和實現。所以你幾乎可以做任何最適合你的工作。

Answer 2

您應該將邏輯加載到控制器內的存儲器，以顯示該存儲的網格。我把它們放在afterrender事件的處理程序中。