Question

我试图让关联在网格面板中工作：当用户点击＆＃34;用户＆＃34;表格对应的地址应出现在＆＃34;地址＆＃34;表。我为此创建了fiddle。我想使用引用和绑定使用选择。

我看过他们的example，但我无法解决我的问题（下面的代码段来自他们的例子）：

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

据我所知，在他们的例子中，使用SimManager提供数据，这可能会添加不同的行为，然后直接从json文件中读取（正如我在小提琴中尝试的那样）。

另外，在这个post（帖子是关于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}'
        }]
    }]
}]

第二种方法是在User模型中使用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
    }]
}

现在您可以使用用户模型的地址字段

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关联

1 个答案: