Nested JSON in dataview with Sencha Architect

Question

I want to display nested JSON data in a dataview in my Sencha Touch 2 project. The JSON contains details of a servicerequest with progress.

The JSON:

{
    "success": true,
    "message": "Request retrieved with id:789",
    "data": {
        "id": 789,
        "description": "request description",
        "subject": "request subject",
        "progresses": [
            {
                "description": "progress description 1"
            },
            {
                "description": "progress description 2"
            },
            {
                "description": "progress description 3"
            }
        ]
    }
}

For getting the data, I have two models, one for the requestdetails, one for the progress and of course a store.

My store:

Ext.define('MyApp.store.RequestStore', {
    extend: 'Ext.data.Store',
    requires: [
        'MyApp.model.RequestModel'
    ],
    config: {
        autoLoad: true,
        autoSync: true,
        model: 'MyApp.model.RequestModel'
    }
});

And my models:

Ext.define('MyApp.model.RequestModel', {
    extend: 'Ext.data.Model',
    uses: [
        'MyApp.model.ProgressModel'
    ],
    config: {
        fields: [
            {
                name: 'id'
            },
            {
                name: 'description'
            },
            {
                name: 'subject'
            }
        ],
        hasMany: {
            associationKey: 'progresses',
            model: 'MyApp.model.ProgressModel'
        },
        proxy: {
            type: 'rest',
            url: 'http://myurl.com/rest/request/789',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    }
});

Ext.define('MyApp.model.ProgressModel', {
    extend: 'Ext.data.Model',
    uses: [
        'MyApp.model.RequestModel'
    ],
    config: {
        fields: [
            {
                name: 'description'
            }
        ],
        belongsTo: {
            model: 'MyApp.model.RequestModel'
        }
    }
});

This is my view:

Ext.define('MyApp.view.MyDataView', {
extend: 'Ext.dataview.DataView',

config: {
    store: 'RequestStoreId',
    itemTpl: [
        '<div>',
        '   <div>ID</div>',
        '   <div>{id}</div>',
        '           ',
        '   <div>Subject</div>',
        '   <div>{subject}</div>',
        '           ',
        '   <div>Description</div>',
        '   <div>{description}</div>',
        '</div>',
        '',
        '<h2><b>Progress:</b></h2>',
        '<tpl for="progressmodels">',
        '    <div>',
        '        <div>{description}</div>',
        '    </div>',
        '</tpl>'
    ]
}
});

Displaying the id, requestType, description and subject works fine. In case of the progress, I want all progressdescription to be shown, but only the first description is displayed now.

I tried a lot and search the internet to solve it, but I can't figure out what it is.

What am I doing wrong here? Do I miss something? Are there people with the same problem?

Thanks in advance!

Do you find any solution yet? I'm also have the same problem as you — Eli, Oct 03 '12 at 04:36
Yes I have. `` worked for me instead of ``. Only problem is that you can't convert the data in the progresses nodes (eg dates) in the model. You have to do this in the Xtemplate itself. — weerd2, Oct 04 '12 at 08:16

score 0 · Accepted Answer · answered Oct 04 '12 at 09:25

0

Replacing

<tpl for="progressmodels">

with

<tpl for="progresses">

worked for me. The progresses node is the node I want to loop. Only disadvantage is that you can't convert the data in the node with your model. You have to do this in your XTemplate as far as I know :)

Hope this will help someone!

answered Oct 04 '12 at 09:25

weerd2

690
1
5
18

By default the root node name should be a pluralised version of target model name, but not necessarily. You can also specify 'root' config parameter for your Reader to override it (and stick to 'progresses' in this case). – Yuriy Oct 16 '12 at 19:41

Nested JSON in dataview with Sencha Architect

1 Answers1