Search code examples
jsondatabasejoinextjsmodel

How can I join models in ExtJS?


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": "[email protected]",
      "sex": "m"
    },
    {
      "id": 2,
      "email": "[email protected]",
      "sex": "m"
    },
    {
      "id": 3,
      "email": "[email protected]",
      "sex": "f"
    },
    {
      "id": 4,
      "email": "[email protected]",
      "sex": "m"
    }
]

I would like to have this on the store:

"users": [
    {
      "id": 1,
      "name": "Philip J. Fry",
      "email": "[email protected]",
      "sex": "m"
    },
    {
      "id": 2,
      "name": "Hubert Farnsworth",
      "email": "[email protected]",
      "sex": "m"
    },
    {
      "id": 3,
      "name": "Turanga Leela",
      "email": "[email protected]",
      "sex": "f"
    },
    {
      "id": 4,
      "name": "Amy Wong",
      "email": "[email protected]",
      "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.


Solution

  • 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