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!

Answer 1

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!