ExtJS Grid - how do I reference a store by id in my view

Question

I am trying to reference a store in my app for the purpose of adding a paging tool bar at the bottom of my gird. In most examples I have studied the store is referenced by variable, ex: store: someStore. However, by I have build my app a little differently and did create a reference variable to the store. I have tried assigning an id but this did not work.

Here is what I have:

In my view Grid.js:

Ext.define('myApp.view.user.Grid', {
    extend: 'Ext.grid.Panel',
    viewModel: {
        type: 'user-grid'
    },
    bind: {
        store: '{users}',
    },
    columns: {...},

    //my paging tool bar
    dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        store: 'girdStore'
        //store: {users} -> did not work
    }],
    ...
});

In my view model GridModel.js:

Ext.define('myApp.view.user.GridModel', {
    extend: 'Ext.app.ViewModel',

    requires: [
        'myApp.model.User'
    ],

    stores: {
        users: {
            model: 'myApp.model.User',
            storeId: 'gridStore',
            autoLoad: true
        }
    },
    formulas: {...}
});

When I try to reference the {users} store by id 'gridStore' I get this error:

Uncaught TypeError: Cannot read property 'on' of undefined

What is the best way to proceed without completely refactoring my model?

Answer 1

When you have a reference to your grid, you could get the store by calling the getStore function. See the ExtJs 6.2.1 documentation.

var grid; // reference to your grid
var store = grid.getStore();

---

You can create the store in initComponent and then attach it to the dockedItems, so both will share the same store.

initComponent: function () {
    var store = Ext.create('Ext.data.Store', {
        model: 'myApp.model.User',
        storeId: 'gridStore',
        autoLoad: true
    });
    this.store = store;
    this.dockedItems = [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        store:store
    }];
    this.callParent(arguments);
}

The initComponent is called once when a new instance of the class is created, see the description in the documentation.

...It is intended to be implemented by each subclass of Ext.Component to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to Ext.Component being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to callParent in order to ensure that the parent class' initComponent method is also called...

The view with the initComponent function.

Ext.define('myApp.view.user.Grid', {
    extend: 'Ext.grid.Panel',
    viewModel: {
        type: 'user-grid'
    },
    initComponent: function () {
        var store = Ext.create('Ext.data.Store', {
            model: 'myApp.model.User',
            storeId: 'gridStore',
            autoLoad: true
        });
        this.store = store;
        this.dockedItems = [{
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            store: store
        }];
        this.callParent(arguments);
    },
    columns: {...},
    ...
});