网格间的Extjs6关联

Question

我试图使关联在网格面板中工作:当用户单击“用户”表中的记录时，相应的地址应该出现在“address”表中。我已经为此创建了一个小提琴。我想使用引用和绑定使用选择。

我看过他们的示例，但是我无法解决我的问题(下面的片段来自他们的例子)：

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

正如我所理解的，在他们的示例中，数据是使用SimManager提供的，这可能会添加不同的行为，然后直接从json文件中读取(就像我在小提琴中尝试的那样)。

此外，在这篇帖子 (这篇文章是关于extjs5的文章，但我认为原理是一样的)中，作者谈到了模型之间的关联和逆关联的存在。在本地示例中，调试时看不到这些关联。

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

Answer 1

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

第一种方法是使用ts_user_id属性存储带有筛选器的地址。

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必须包含带有地址模型数组的字段地址。

{
    "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
    }]
}

现在您可以使用用户模型的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}'
        }]
    }]
}]

第一个例子

第二个例子