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?

And-y · Answer 1 · 2017-02-08T15:49:11.000

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: {...},
    ...
});

Yes I do that in my controller to hookup the store to my view, but I am not sure how that helps me with referencing it in dockedItems. Adding bind: store: '{users}' } removed the error but it does not show any data as I add records via my addRecord method. — MadCatm2, Feb 08 '17 at 15:32
Ok apologies for the dumb question ( I am very new to EXTjs ), but where would this initComp method go? As a method of the Ext.define('myApp.view.user.Grid', { }) class? — MadCatm2, Feb 08 '17 at 15:43
Right I see, but this has the same effect as simply adding bind: store: '{users}' } to dockedItems [{...}] It removes the TypeError, but my paging tool bar does not display the number of records or pages. This problem might be unrelated to referencing the store correctly ... — MadCatm2, Feb 08 '17 at 15:57
Do not forget in your store the configs pageSize: 25 and autoLoad:{ start: 0, limit: 25 }, (25 is an example) http://docs.sencha.com/extjs/6.2.1/classic/Ext.toolbar.Paging.html — jose, Feb 08 '17 at 17:13
I'll copy it on Sancha Fiddle...my company blocks JSFiddle :( — MadCatm2, Feb 08 '17 at 18:20

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

1 Answers1