具有相同存储Ext JS的网格问题

Question

所以我有panel(让它叫它fooPanel)包含一个grid(让我们调用,如果fooGrid,有一些store).fooPanel可以插入一些tabpanel.所以事实是,有可能tabpanel包含两个(或更多)实例fooPanel,带有一些不同的参数.我认为这个问题很明显.由于与fooGrids面板的相同stores,只要我重新加载一个商店,两者fooGrids都被重新加载.(因为他们有相同的stores).这个问题有方法解决吗？或者我应该限制用户只打开一个fooPanelper的实例tabpanel

Answer 1

除了每个网格创建一个商店外,没有简单的解 如果您不想创建存储的多个实例的原因是为了避免多次加载,您可以在代理级别破解某种缓存.

编辑如何为网格创建多个商店的示例

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

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