javascript - 如何在某些面板中使用具有相同数据的特定 extjs 存储？

Question

我正在开发一个MVVM Extjs 6应用程序。我有一家商店，我想在几个面板中使用这家商店。数据的存储，在所有面板中都是相同的。我想重新加载商店并在某些面板的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
}