ExtJs loading nested JSON data MVC

Question

I know this has been discussed a lot of times, but I just can't get my code working... So I have a PHP script which returns the following JSON.

I want the data to be loaded in a grid like this:

name | status | ztn | dtn | idn

{
   "success":true,
   "code":0,
   "message":"works",
   "data":[
      {
         "name":"connection1",
         "status":1,
         "locks":[
            {
               "ztn":"abc",
               "dtn":"def",
               "idn":"123"
            },
            {
               "ztn":"ghi",
               "dtn":"jkl",
               "idn":"456"
            }
         ]
      },
      {
         "name":"connection2",
         "status":1,
         "locks":[
            {
               "ztn":"mno",
               "dtn":"pqr",
               "idn":"789"
            }
         ]
      }

My store is set up like this:

Ext.define('VPN.store.Connections', {
    extend: 'Ext.data.Store',
    id: 'connectionStore',
    requires: [
        'VPN.model.Connection',
        'VPN.model.ConnectionLocks'
    ],
    model: "VPN.model.Connection",
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'api/router.php',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

My first model looks like this:

Ext.define("VPN.model.Connection", {
    extend: 'Ext.data.Model',
    id: 'connectionModel',
    fields: ['name', 'status'],
    hasMany: {
        model: 'VPN.model.ConnectionLocks',
        name: 'locks'
    }
});

and my second model like this:

Ext.define("VPN.model.ConnectionLocks", {
    extend: 'Ext.data.Model',
    id: 'connectionLocksModel',
    fields: ['ztn', 'dtn', 'idn'],
    belongsTo: 'VPN.model.Connections'
});

The grid's store is VPN.model.Connections. name and status are displayed correctly, but the lock's ztn, dtn and idn are not shown... So where's my mistake?

You can query the resulting nested `store` on each `Connection` item like so `store.data.items[0].locks()`. Does this not return the proper `ConnectionLocks` store items for the `Connection` item? — weeksdev, Mar 10 '14 at 13:52
I'm pretty new to ExtJS and especially MVC. so where do I have to run that? I always get `store is undefined` or `Cannot call method 'locks' of undefined`... — p4b4, Mar 10 '14 at 14:06
You need to find the corresponding parent store. Here is an example all inline: `Ext.getStore('Connections').data.items[0].locks()` — weeksdev, Mar 10 '14 at 14:09
through the console I saw, that it returned the proper `ConnectionLocks`. But how can I load them into my grid? For example which `dataIndex` do I have to use? — p4b4, Mar 10 '14 at 14:34
Well, there is a one to many relationship between the stores. So displaying them in the current grid would be difficult. There are examples online of adding an expander to the grid to relay data. Or sometimes, i'll just add a second grid to display the child store. — weeksdev, Mar 10 '14 at 14:49
The problem is, that the `lock's` are data reffering to a specific name, so I can't just create another grid... Isn't there a way of parsing them or such through a column renderer or so? — p4b4, Mar 10 '14 at 15:08
I usually change the subsequent grid on the selection change (only showing the corresponding items for the selected item). I see you found a work around to aggregate the data, cool. — weeksdev, Mar 10 '14 at 17:13

score 0 · Answer 1 · answered Mar 10 '14 at 15:29

I finally found a workaround. It's a part of a snippet I found and changed. I replaced the dataIndex in my store-definition with the following code

renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
                values = [];
                record.locks().each(function(lock) {
                    values.push(lock.get('idn'));
                });
                return values.join(', ');
            }

ExtJs loading nested JSON data MVC

1 Answers1