与Sencha Architect在dataview中嵌套的JSON

时间:2012-09-25 11:13:37

标签: json sencha-touch-2 sencha-architect

我想在Sencha Touch 2项目的数据视图中显示嵌套的JSON数据。 JSON包含带有进度的服务请求的详细信息。

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"
            }
        ]
    }
}

为了获取数据,我有两个模型,一个用于requestdetails,一个用于进度,当然还有商店。

我的商店:

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

我的模特:

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'
        }
    }
});

这是我的观点:

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>'
    ]
}
});

显示idrequestTypedescriptionsubject可以正常工作。如果有进展,我希望显示所有进度描述,但现在只显示第一个描述。

我尝试了很多并搜索互联网来解决它,但我无法弄清楚它是什么。

我在这里做错了什么?我错过了什么吗?是否有人有同样的问题?

提前致谢!

1 个答案:

答案 0 :(得分:0)

更换

<tpl for="progressmodels">

<tpl for="progresses">

为我工作。 progresses节点是我想循环的节点。唯一的缺点是您无法使用模型转换节点中的数据。据我所知,您必须在XTemplate中执行此操作:)

希望这会对某人有所帮助!