Extjs6 网格之间的关联

Question

我试图让关联在网格面板中工作：当用户单击 "users" table 中的记录时，相应的地址应该出现在 "addresses" table。我为此创建了一个 fiddle。我想使用参考并使用选择进行绑定。

我查看了他们的 example 但我无法解决我的问题（以下代码段来自他们的示例）：

 xtype: 'grid',
 bind: '{customerGrid.selection.orders}',

据我了解，在他们的示例中，数据是使用 SimManager 提供的，它可能会添加不同的行为，然后直接从 json 文件读取（正如我在 fiddle 中尝试的那样）。

另外，在这个post中（post是关于extjs5的，但我认为原理是一样的），作者说了一些关于模型之间关联和逆关联的存在。在我本地的例子中，在调试时，我看不到这些关联。

如何正确使用两个网格之间的关联？

Answer 1

我知道两种获取用户地址存储的方法。

第一种方法是使用地址存储并通过属性 ts_user_id.[=15= 进行过滤]

viewModel: {
    stores: {
        users: {
            type: 'users'
        },
        addresses: {
            type: 'addresses',
            filters: [{
                property: 'ts_user_id',
                exactMatch: true,
                value: '{usersGrid.selection.ts_id}'
            }]
        }
    }
},

items: [{
    title: 'Home',
    layout: 'fit',
    items:[{
        xtype: 'panel',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'tabGrid',
            margin: '10 0 0 0',
            reference: 'usersGrid',
            bind: '{users}',
        },{
            xtype: 'addressGrid',
            margin: '10 0 0 0',
            bind: '{addresses}'
        }]
    }]
}]

第二种方式是在用户模型中使用 hasMany。但是这种方式需要改变users.json并且根本不使用addresses.json。

users.json 必须包含字段 addresses 以及 Address 模型

{
    "ts_id": 1,
    "ts_name": "john smith",
    "ts_email": "js@email.com",
    "addresses": [{
        "ts_id": 1,
        "ts_address": "Street A, no 24",
        "ts_user_id": 1
    }, {
        "ts_id": 2,
        "ts_address": "Street B, no 44",
        "ts_user_id": 1
    }]
}

现在您可以使用 User model

的 addresses 字段

viewModel: {
    stores: {
        users: {
            type: 'users'
        }
    }
},

items: [{
    title: 'Home',
    layout: 'fit',
    items:[{
        xtype: 'panel',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'tabGrid',
            margin: '10 0 0 0',
            reference: 'usersGrid',
            bind: '{users}',
        },{
            xtype: 'addressGrid',
            margin: '10 0 0 0',
            bind: '{usersGrid.selection.addresses}'
        }]
    }]
}]

First example

Second example

Extjs6 网格之间的关联

Extjs6 association between grids

extjs

extjs6