model-view-controller - Ext JS 4 - 如何创建多个商店实例并分配给 View ？ (MVC)

Question

您如何创建商店的独特实例并将它们分配给 View (如果需要，我可以创建独特的 View 和/或 Controller )？

一个简单的用例 - 我想打开多个网格(相同类型)，其中包含来自每个商店的记录列表。每个网格都需要有自己的存储实例，因为它可以有自己的记录列表、自己的过滤等。

我试过这个，但它不起作用，我的网格不绘制:

 var theView = Ext.create('App.view.encounter.List');
    theView.title = 'WORC Encounters';
    var theStore=Ext.create('App.store.Encounters');
    theView.store=theStore;
    tabhost.add({title:'WORC',items:theView});

    var theView = Ext.create('App.view.encounter.List');
    theView.title = 'NC Encounters';
    var theStore2=Ext.create('App.store.Encounters');
    theView.store=theStore2;
    tabhost.add({title:'NC',items:theView});

Answer 1

您需要在组件初始化时(或之前)分配存储。在 initComponent 中。

Ext.define('classname', {
    extend: 'Ext.grid.Panel',
    //...
    initComponent: function() {
        var me = this;

        var theStore = Ext.create('App.store.Encounters');
        Ext.apply(me, {
            store: theStore
        }); 

        me.callParent();
    }
    //...
});

你也可以这样做:

//Create the store
var theStore = Ext.create('App.store.Encounters');
//Create the view
var theView = Ext.create('App.view.encounter.List', {
     store: theStore
});

为您编辑特定示例:

var theStore = Ext.create('App.store.Encounters');
var theView = Ext.create('App.view.encounter.List', {
       title:  'WORC Encounters',
       store: theStore
});
tabhost.add({title:'WORC',items:theView});


var theStore2=Ext.create('App.store.Encounters');
var theView2 = Ext.create('App.view.encounter.List', {
       title: 'NC Encounters',
       store: theStore2
});
tabhost.add({title:'NC',items:theView2});