Ext JS 4 - 如何创建多个商店实例并分配给视图？ （MVC）

Question

如何创建商店的唯一实例并将它们分配给视图（如果需要，我可以创建唯一的视图和/或控制器）？

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

我尝试了这个，但它不起作用，我的网格不绘制：

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