How can I join models in ExtJS? - json

Question

In ExtJS 6.02, I would like to join 2 or more models into a single store.
1 to 1 relationship:
Given users that can only be associated with a single user detail row in DB:
"users": [
{
"id": 1,
"name": "Philip J. Fry",
"userDetail": 1
},
{
"id": 2,
"name": "Hubert Farnsworth",
"userDetail": 2
},
{
"id": 3,
"name": "Turanga Leela",
"userDetail": 3
},
{
"id": 4,
"name": "Amy Wong",
"userDetail": 4
}
]
"usersDetails": [
{
"id": 1,
"email": "jfry#a.com",
"sex": "m"
},
{
"id": 2,
"email": "hubert#a.com",
"sex": "m"
},
{
"id": 3,
"email": "leela#a.com",
"sex": "f"
},
{
"id": 4,
"email": "amy#a.com",
"sex": "m"
}
]
I would like to have this on the store:
"users": [
{
"id": 1,
"name": "Philip J. Fry",
"email": "jfry#a.com",
"sex": "m"
},
{
"id": 2,
"name": "Hubert Farnsworth",
"email": "hubert#a.com",
"sex": "m"
},
{
"id": 3,
"name": "Turanga Leela",
"email": "leela#a.com",
"sex": "f"
},
{
"id": 4,
"name": "Amy Wong",
"email": "amy#a.com",
"sex": "m"
}
]
1 to many relationship:
Given users that can have multiple posts in BD:
"users": [
{
"id": 1,
"name": "Philip J. Fry",
"userDetail": 1
},
{
"id": 2,
"name": "Hubert Farnsworth",
"userDetail": 2
},
{
"id": 3,
"name": "Turanga Leela",
"userDetail": 3
},
{
"id": 4,
"name": "Amy Wong",
"userDetail": 4
}
]
"posts": [
{
"id": 1,
"user": 1,
"title": "Post 1 title",
"body": "Post 1 body"
},
{
"id": 2,
"user": 1,
"title": "Post 2 title",
"body": "Post 2 body"
},
{
"id": 3,
"user": 2,
"title": "Post 3 title",
"body": "Post 3 body"
},
{
"id": 4,
"user": 3,
"title": "Post 4 title",
"body": "Post 4 body"
}
]
I would like to have a store containing:
"items": [
{
"id": 1,
"name": "Philip J. Fry",
"posts": [
{
"id": 1,
"title": "Post 1 title",
"body": "Post 1 body"
},
{
"id": 2,
"title": "Post 2 title",
"body": "Post 2 body"
}
]
},
{
"id": 2,
"name": "Hubert Farnsworth",
"posts": [
{
"id": 3,
"user": 2,
"title": "Post 3 title",
"body": "Post 3 body"
}
]
},
{
"id": 3,
"name": "Turanga Leela",
"userDetail": 3,
"posts": [
{
"id": 4,
"user": 3,
"title": "Post 4 title",
"body": "Post 4 body"
}
]
},
{
"id": 4,
"name": "Amy Wong",
"posts": []
}
]
Many to 1 relationship:
This is actually my actual issue, I have a DB table with multiple items that each can only match a single item in another table.
Should be same as 1 to many.
Many to many relationship:
Basicly same as 1 to many I guess?
I have seem this solution: https://fiddle.sencha.com/#fiddle/1hs9&view/editor it doesn't cover everything and maybe there's a better option.

Answer 1

According to Sencha support:
The concept of joining records doesn't really exist within ExtJS but
you can, by making use of renderers, access and print record
association data.
I have a simple fiddle of your example above showing you how you may
achieve this. Please note that dynamic loading of association (which
you have in your example) makes using renderers a bit tricky, but not
impossible, as the loading of the association info is asynchronous in
nature and the renderer cannot wait for the response. The work around
is to refresh the entire grid when all association stores have
finished loading.
https://fiddle.sencha.com/#fiddle/3d1v&view/editor