Extjs6 association between grids

Question

I'm trying to make associations work in grid panel: when the user click on a record in the "users" table the corresponding address should appear in the "addresses" table. I've created a fiddle for this. I want to use reference and bind using selection.

I've looked at their example but I was not able to resolve my case(The below snippet is from their example):

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

As I understood, in their example, the data is served using SimManager which may add different behavior then reading directly from json file(as I tried in the fiddle).

Also, in this post (the post is about extjs5 but I think the principle is the same), the author says something about the presence of association and inverse association between models. In my local example, when debugging, I cannot see these associations.

How to properly use association between two grids?

Answer 1

I know two ways to get user's addresses store.

First way is a using addresses store with filter by property 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}'
        }]
    }]
}]

Second way is a using hasMany in User model. But this way needs change users.json and doesn't use addresses.json at all.

users.json must contains field addresses with array of Address model

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

And now you can use addresses field of User model

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