Javascript ExtJs：从两个不同的API加载单个网格

我有两个实体，从两个不同的API发送，具有一对一的关系

我想在同一网格面板中加载两个模型。问题是我只能加载一个存储。为了加载另一个存储，我向grid reload事件附加了一个回调，该事件手动编辑网格DOM以插入来自第二个存储的数据

我的问题是：我可以在不使用DOM hack的情况下加载模型和关联吗？

API中的实体如下所示：

Get /Users/Details:
{ 
    "Id" : "55b795827572761a08d735ac", 
    "Username" : "djohns", 
    "Email" : "admin@mail.com", 
    "FirstName" : "Davey", 
    "LastName" : "Johns"
}

以及：

请注意相同的id，它在API中用作键/外键）

以下是模型：

Ext.define('Portal.model.users.UserRights', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'id',
            mapping: 'Id'
        },
        {
            name: 'Status'
        },
        {
            name: 'UserId',
            mapping: 'Id',
            reference: 'Portal.model.users.UserDetails'
        }
    ],

    schema: {
        namespace: 'Portal.model.users',
        proxy: {
            type: 'rest',
            url: Portal.util.Util.constants.apiBaseURL + 'Users/Rights',
            reader: {
                type: 'json',
                rootProperty: 'Objects'
            }
        }
    }
});

以及：

我为用户详细信息定义了一个存储（而用户权限的存储在其自己的模型中）：

下面是我如何配置网格的：

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

    store: 'UsersDetails',

    columns: [
        {
            dataIndex: 'id',
            text: 'Id'
        },
        {
            dataIndex: 'Username',
            text: 'Username'
        },
        {
            dataIndex: 'Email',
            text: 'Email'
        },
        {
            dataIndex: 'FirstName',          
            text: 'First Name'
        },
        {
            dataIndex: 'LastName',
            text: 'Last Name'
        },         
        {
            text: "Status",
            cls: "status-column",
            renderer: function (value, meta, record) {
                return "loading...";
            }
        }
    ],

    loadUserRights: function () {
        var columns = this.getEl().select('.status-column');
        var cells = this.getEl().select(".x-grid-cell-" + columns.elements[0].id + " .x-grid-cell-inner");
        data = this.getStore().getData();

        Ext.each(data.items, function (record, index) {
            var userRights = record.userUserRights();
            userRights.load({
                callback: function (records, operation, success) {
                    if (success) {
                        cells.elements[index].innerText = userRights.data.items[0].data.Status;
                    }
                }
            });

        });
    }
});

然后我从外部函数加载网格：

grid.getStore().reload({
    callback: function (records, operation, success) {
        grid.loadUserRights();
    }
});

Ext.define('Portal.store.UsersDetails', {
    extend: 'Ext.data.Store',
    model: 'Portal.model.users.UserDetails',
    proxy: {
        type: 'rest',
        url: Portal.util.Util.constants.apiBaseURL + 'Users/Details',
        reader: {
            type: 'json',
            rootProperty: 'Objects'
        }
    }
});

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

    store: 'UsersDetails',

    columns: [
        {
            dataIndex: 'id',
            text: 'Id'
        },
        {
            dataIndex: 'Username',
            text: 'Username'
        },
        {
            dataIndex: 'Email',
            text: 'Email'
        },
        {
            dataIndex: 'FirstName',          
            text: 'First Name'
        },
        {
            dataIndex: 'LastName',
            text: 'Last Name'
        },         
        {
            text: "Status",
            cls: "status-column",
            renderer: function (value, meta, record) {
                return "loading...";
            }
        }
    ],

    loadUserRights: function () {
        var columns = this.getEl().select('.status-column');
        var cells = this.getEl().select(".x-grid-cell-" + columns.elements[0].id + " .x-grid-cell-inner");
        data = this.getStore().getData();

        Ext.each(data.items, function (record, index) {
            var userRights = record.userUserRights();
            userRights.load({
                callback: function (records, operation, success) {
                    if (success) {
                        cells.elements[index].innerText = userRights.data.items[0].data.Status;
                    }
                }
            });

        });
    }
});

grid.getStore().reload({
    callback: function (records, operation, success) {
        grid.loadUserRights();
    }
});