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

您需要在组件初始化时（或之前）分配存储。在初始化组件中。

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