Binding ExtJs 5网格存储/视图模型绑定：无法修改ext空存储

这件事让我毛骨悚然

我有一个带有一些网格、商店和viewModel的视图。我需要不同网格中存储的不同过滤版本，所以我尝试将每个过滤存储绑定到网格。现在我甚至不能在网格中加载存储

我的代码是这样的：

商店：

Ext.define('My.store.Admin.Kinder', {
    extend: 'Ext.data.Store',
    model: 'My.model.Kind',
    storeId: 'adminKinderStore',
    alias: 'store.adminKinder',
    proxy: {
        type: 'ajax',
        method: 'post',
        url: '/getKinder',
        reader: {
            type: 'json',
            rootProperty: 'kinder'
        }
    }
});

Ext.define('My.model.kindViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.kindViewModel',
    requires: [
        'My.model.Kind',
        'My.store.Admin.Kinder'
    ],
    view: 'kindView',
    stores: {
        warteliste: {
            type: 'adminKinder'
        }
    }
});

Ext.define('My.view.Admin.kinder', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.kindView',
    id: 'kinder-panel',
    requires: [
        'My.view.Admin.kindController',
        'My.model.kindViewModel'
    ],
    controller: 'kind',
    border: false,
    maxWidth: 960,
    session: My.session,
    viewModel: {
        type: 'kindViewModel'    
    },    
    initComponent: function() {
        this.activeTab = 'warteliste-tab';
        this.callParent();
    },
    items: [
    {
        xtype: 'grid',
        id: 'warteliste-grid',
        bind: {
            store: '{warteliste}'
        },              
        border: false,
        margin: '0 0 20px 0',
        selModel: {
            allowDeselect: true
        },
        columns: [
            // some grid columns
        ],
        listeners: {
            afterRender: function(grid) {
                grid.store.load();
            }
        }
    }]
});

视图模型：

Ext.define('My.store.Admin.Kinder', {
    extend: 'Ext.data.Store',
    model: 'My.model.Kind',
    storeId: 'adminKinderStore',
    alias: 'store.adminKinder',
    proxy: {
        type: 'ajax',
        method: 'post',
        url: '/getKinder',
        reader: {
            type: 'json',
            rootProperty: 'kinder'
        }
    }
});

Ext.define('My.model.kindViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.kindViewModel',
    requires: [
        'My.model.Kind',
        'My.store.Admin.Kinder'
    ],
    view: 'kindView',
    stores: {
        warteliste: {
            type: 'adminKinder'
        }
    }
});

Ext.define('My.view.Admin.kinder', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.kindView',
    id: 'kinder-panel',
    requires: [
        'My.view.Admin.kindController',
        'My.model.kindViewModel'
    ],
    controller: 'kind',
    border: false,
    maxWidth: 960,
    session: My.session,
    viewModel: {
        type: 'kindViewModel'    
    },    
    initComponent: function() {
        this.activeTab = 'warteliste-tab';
        this.callParent();
    },
    items: [
    {
        xtype: 'grid',
        id: 'warteliste-grid',
        bind: {
            store: '{warteliste}'
        },              
        border: false,
        margin: '0 0 20px 0',
        selModel: {
            allowDeselect: true
        },
        columns: [
            // some grid columns
        ],
        listeners: {
            afterRender: function(grid) {
                grid.store.load();
            }
        }
    }]
});

查看：

Ext.define('My.store.Admin.Kinder', {
    extend: 'Ext.data.Store',
    model: 'My.model.Kind',
    storeId: 'adminKinderStore',
    alias: 'store.adminKinder',
    proxy: {
        type: 'ajax',
        method: 'post',
        url: '/getKinder',
        reader: {
            type: 'json',
            rootProperty: 'kinder'
        }
    }
});

Ext.define('My.model.kindViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.kindViewModel',
    requires: [
        'My.model.Kind',
        'My.store.Admin.Kinder'
    ],
    view: 'kindView',
    stores: {
        warteliste: {
            type: 'adminKinder'
        }
    }
});

Ext.define('My.view.Admin.kinder', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.kindView',
    id: 'kinder-panel',
    requires: [
        'My.view.Admin.kindController',
        'My.model.kindViewModel'
    ],
    controller: 'kind',
    border: false,
    maxWidth: 960,
    session: My.session,
    viewModel: {
        type: 'kindViewModel'    
    },    
    initComponent: function() {
        this.activeTab = 'warteliste-tab';
        this.callParent();
    },
    items: [
    {
        xtype: 'grid',
        id: 'warteliste-grid',
        bind: {
            store: '{warteliste}'
        },              
        border: false,
        margin: '0 0 20px 0',
        selModel: {
            allowDeselect: true
        },
        columns: [
            // some grid columns
        ],
        listeners: {
            afterRender: function(grid) {
                grid.store.load();
            }
        }
    }]
});

我收到一条错误消息“无法修改ext empty store”，这意味着在afterRender侦听器中调用store.load（）时，该存储尚未绑定。

---

奇怪的是，当我在网格中记录console.log时，存储就在那里。当输入console.log grid.store时，返回一个空存储。

检查存储是否按照viewmodel中的预期创建。通常，我们在

/store

目录中没有存储定义文件，但我们将它们的配置放在viewmodel中

请参见此处的示例：-

MainModel:：stores

你最初问题的解决方案

我需要不同网格中存储的不同过滤版本

都是连锁店

---

请参见如何在此处实现它们的示例：

我在afterRender事件中遇到了相同的问题，并通过不从网格中获取存储来解决它

grid.store.load();

但在ViewModel（ViewController范围）中：

对我来说是

myGrid.getViewModel().getStore('myStoreName').load();

---

问题似乎是加载顺序。。。如果我使用stores:{warteliste:{type:'adminKinder'，autoLoad:true}}，并跳过afterRender函数，它会工作。链式存储也可以工作。它在getStore中不使用“{}”就可以工作。这个.getViewModel（）.getStore（'warteliste'）.load（）；