ExtJs 5 grid store/viewmodel binding: Cannot modify ext-empty-store

Question

I'm pulling my hair out on this one...

I have a view with some grids, a store and a viewModel. I need different filtered versions of the store in different grids, so I'm trying to bind each filtered store to a grid. Now I can't even get a store to load in a grid in the first place...

Here's what my code looks like:

Store:

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

ViewModel:

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

View:

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

I get an error message "Cannot modify ext-empty-store", which must mean that the store is not (yet) bound when store.load() is called in the afterRender listener. Strange thing is, when I console.log the grid, the store is there. When I console.log grid.store, an empty store is returned.

Answer 1

I got the same issue in afterRender event and solved it by not getting the store from the grid like

grid.store.load();

but from the ViewModel (ViewController scope):

this.getViewModel().getStore('{warteliste}').load();

Answer 2

Check if the store is created as expected in viewmodel. Normally, we do not have store definition files in ./store directory but we place their configurations in viewmodel.

See an example of that here: http://extjs.eu/ext-examples/#bind-grid-form - MainModel::stores

The solution to your original problem

I need different filtered versions of the store in different grids

are chained stores.

See an example of how to implement them here: http://extjs.eu/on-chained-stores/

Answer 3

for me it was

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