具有相同存储ExtJS的网格的问题

Question

所以我有一个包含grid的panel（让我们称之为fooPanel）（如果fooGrid有一些store，让我们调用它）。可以将CCD_ 6插入到一些CCD_。所以问题是，tabpanel可能包含fooPanel的两个（或多个）实例，并带有一些不同的参数。我认为这里的问题很明显。由于面板中的fooGrids具有相同的stores，因此只要我重新加载一个存储，两个fooGrids都将被重新加载。（因为它们具有相同的stores）。有解决办法吗？或者我应该限制用户每个tabpanel 只打开一个fooPanel实例

Answer 1

除了为每个网格创建一个存储之外，没有简单的解决方案。如果你不想创建多个存储实例的原因是为了避免多次加载，你可以在代理级别破解某种缓存。

编辑如何为网格创建多个存储的示例

您可以在网格的initComponent方法中自己创建商店实例（即使用Ext.create('My.Store')）：

Ext.define('My.Store', {
    extend: 'Ext.data.Store'
    ,fields: ['name']
    ,proxy: {
        type: 'memory'
        ,reader: 'array'
    }
    ,data: [['Foo'],['Bar'],['Baz']]
});
Ext.define('My.Grid', {
    extend: 'Ext.grid.Panel'
    ,columns: [{dataIndex: 'name'}]
    ,initComponent: function() {
        // /! Do that BEFORE calling parent method
        if (!this.store) {
            this.store = Ext.create('My.Store');
        }
        // ... but don't forget to call parent method            
        this.callParent(arguments);
    }
});
// Then I can create multiple grids, they will have their own store instances
Ext.create('My.Grid', {
    renderTo: Ext.getBody()
    ,height: 200
});
Ext.create('My.Grid', {
    renderTo: Ext.getBody()
    ,height: 200
});

或者，您可以在创建时指定一个新的存储实例:

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody()
    ,height: 200
    ,columns: [{dataIndex: 'name'}]
    ,store: Ext.create('My.Store') // one instance
});
Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody()
    ,height: 200
    ,columns: [{dataIndex: 'name'}]
    ,store: Ext.create('My.Store') // two instances!
});

但是，就我而言，我通常不会去创建完整的商店定义。我在模型中配置代理，并使用该模型使用内联存储配置（内联配置将在Ext4中转换为自己的实例）。示例：

Ext.define('My.Grid', {
    extend: 'Ext.grid.Panel'
    ,columns: [{dataIndex: 'name'}]
    // inline store configuration
    ,store: {
        // The model takes care of the fields & proxy definition
        model: 'My.Model'
        // other params (like remoteSort, etc.)
    }
});
// Now I can create plenty of My.Grid again, that won't interfere with each other

Answer 2

在ExtJS 5中，您可以利用Chained Stores。这样，您就可以有一个单一的源存储，而其他存储则使用不同的过滤器查看同一个存储。

http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/whats_new.html

http://extjs.eu/on-chained-stores/

Answer 3

这篇文章可能会帮助你

Ext.define('App.store.MyStore', {
    extend : 'Ext.data.Store',
    alias  : 'store.app-mystore', // create store alias
    // ... 
}); 
Ext.define('App.view.MyCombo', {
    extend : 'Ext.form.field.ComboBox',
    xtype  : 'app-mycombo',
   requires : [
       'App.store.myStore'
   ],
   // combo config
   store : {
       type : 'app-mystore' // store alias; type creates new instance
   }
});

http://www.sencha.com/forum/showthread.php?284388-ExtJs-4.2-存储中的多个实例；p=1040251