How can use specific extjs store with same data in some panels?

Question

I'm developing a MVVM Extjs 6 application. I have a store and I want to use this store in several panel 's. The data's store , in all panel s is same. I want to reload the store and call some function in some panel 's viewController .

I have no idea. How can I implement this feature ?

Answer 1

It's not clear for me whether you need to know how to connect your store to a panel, or you explicitly need to call something when the store updates.I will try to address both concerns.

How things work:

The store is an object that connects to your sever and loads/updates that data. The store needs a model (a data model, not a view model) and a proxy (an object that tells it how to connect to your server). Something like this:

Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    proxy: {
        type: 'rest',
        url: 'url_to_some_rest_api_function/',
        reader: {
            type: 'json',
            rootProperty: 'rows'
        },
        writer: {
            writeAllFields: true
        }
    }
});

And the model can be something like this:

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',

    /*Use mapping here if backend name is different*/
    fields: [
        {
            name: 'Name',
            mapping: 'FirstName'
        },
        {
            name: 'Email',
            type: 'string'
        }
    ]

});

You can now build a panel to bind its data to this store and lets assume here a gird panel, like this:

Ext.define('MyApp.view.UsersGrid', {
    extend: 'Ext.grid.Panel',

    alias: 'widget.users-grid', 

    store: 'Users',
    autoLoad: true,

    selType: 'rowmodel',
    columns: [
        {
            dataIndex: 'Name',
            flex: 1,
            text: 'Name of the user'
        },
        {
            dataIndex: 'Email',
            flex: 1,
            text: 'Email'
        }
    ]
});

Notice the autoLoad: true part. This makes your grid load its data automatically when the view loads. Now to manually reload this store in any view controller, using a button for example, you can use:

Ext.ComponentQuery.query('users-grid')[0].getStore().reload();

This will also update your grid immediately.

How to call your functions when store is changed

If you want to call some functions when the store is changed, add a handler to its datachanged event.

var myStore = Ext.getStore("Users");
myStore.on("datachanged", onDataChanged, this);

function onDataChanged(store){
    // code here
}