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