如何在某些面板中使用特定的extj存储相同的数据？

Question

我正在开发一个MVVM Extjs 6应用程序。我有store，我想在几个store中使用此panel。所有store中的数据panel都是相同的。我想重新加载store并在某些panel viewController中调用某个函数。

我不知道。 如何实施此功能？

Answer 1

我不清楚您是否需要知道如何将商店连接到面板，或者您明确需要在商店更新时调用某些内容。我将尝试解决这两个问题。

事情如何运作：

商店是一个连接到服务器并加载/更新该数据的对象。商店需要一个模型（一个数据模型，而不是一个视图模型）和一个代理（一个告诉它如何连接到你的服务器的对象）。像这样：

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

模型可以是这样的：

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'
        }
    ]

});

您现在可以构建一个面板来将其数据绑定到此商店，并假设这里有一个网格面板，如下所示：

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

注意autoLoad: true部分。这会使您的网格在加载视图时自动加载其数据。 现在，要使用按钮在任何视图控制器中手动重新加载此存储，您可以使用：

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

这也会立即更新您的网格。

如何在商店更改时调用您的功能

如果要在更改商店时调用某些函数，请在其datachanged事件中添加处理程序。

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

function onDataChanged(store){
    // code here
}