Sencha Touch2：在列表的单独行中显示嵌套的Json数据

Question

我是sencha touch2的新手，在列表的单独行中显示嵌套json数据时遇到问题。 这是我的Json样子：

[
    {
        "work": {
            "agent": {
                "activeFlag": "false",
                "shiftId": "0",
                "id": "0",
                "deleteFlag": "false"
            },
            "id": "124",
            "status": "Unassigned",
            "assignment": {
                "pnr": {
                    "locator": "ABCDEF",
                    "connectTime": "0",
                    "id": "0"
                },
                "id": "123",
                "alerts": "Delay",
                "customers": [
                    {
                        "lastName": "XYZ",
                        "firstName": "MNO"
                    },
                    {
                        "lastName": "PQR",
                        "firstName": "STU "
                    }
                ]
            }
        }
    },
    {
        "work": {
            "agent": {
                "activeFlag": "false",
                "shiftId": "0",
                "id": "0",
                "deleteFlag": "false"
            },
            "id": "124",
            "status": "Unassigned",
            "assignment": {
                "pnr": {
                    "locator": "ABCDEF",
                    "connectTime": "0",
                    "id": "0"
                },
                "id": "123",
                "alerts": "Delay",
                "customers": [
                    {
                        "lastName": "ANY",
                        "firstName": "KLJ"
                    },
                    {
                        "lastName": "CHE",
                        "firstName": "MAK"
                    }
                ]
            }
        }
    }
]

像这样，我有30个“工作”对象，在1个“工作”中，我有1个“客户”数组，我内部有多个客户

我想在列表的不同行中显示“客户”，但能够在一行中显示单个“工作”的所有客户。

Output should be:
---------------
delay
First Name: MNO
---------------
delay
First Name: STU
---------------
delay
First Name: KLJ
---------------
delay
First Name: MAK
---------------

这是模型。 ModelList.js：

Ext.define('CustomList.model.ModelList', {
    extend: 'Ext.data.Model',
    xtype:'modelList',
    requires:['CustomList.model.Customers'],
    config: {
            fields:['work'],
        proxy:{
            type:'ajax',
            url:'http://localhost:9091/CustomListJson/app/store/sample.json',
            reader:{
            type:'json'

        }
    },
    hasMany:{model:'CustomList.model.Customers',
             name:'customers'}
    }

});

Customer.js：

Ext.define('CustomList.model.Customers', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'firstName','lastName'
        ],
        belongsTo: "CustomList.model.ModelList"
    }

});

这是我的ShowList.js：

Ext.define('CustomList.view.ShowList',{
    extend:'Ext.Panel',
    xtype:'showList',
    config:{
        layout:'fit',
        styleHtmlContent:'true',
        styleHtmlCls:'showListCls',
        items:[
            {
                xtype:'list',
                id: 'listitems',
                store:'StoreList',
            itemTpl:[ '{work.assignment.alerts}<br>',
                '<tpl for="work.assignment.customers">',
                'firstName: {firstName}<br>',
                '</tpl>'
            ]
 // am able get the below values in list
//                itemTpl:'{work.assignment.alerts}'
//                itemTpl:'{work.assignment.pnr.locator}'
//                  itemTpl:'{work.agent.activeFlag}'
//                itemTpl: '<b>{firstName} {lastName}     </b><br>'+'pnr: '+ '{locator}  <br>' +
//                    'Alerts: '+'{alerts}' +'status: '+'{status} '
               }]


    }
});

这是我的StoreList.js：

Ext.define('CustomList.store.StoreList', {
    extend:'Ext.data.Store',
    requires:['Ext.data.reader.Json'],
    config:{
        model:'CustomList.model.ModelList',
        autoLoad:'true'

    }
});

谁能帮帮我吗。 谢谢。

Answer 1

这是你所追求的吗？

在这里下载

这是一个非常简单的模型，但是它应该可以帮助您，我认为您是模型协会，这令人困惑。

清单：

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.List',

    config: {
        store: 'MyJsonStore',
        itemTpl: [
            '<div><div><h1>{work.assignment.alerts}</h1></div><tpl for="work.assignment.customers"><div>First Name: {firstName}</div></tpl></div>'
        ]
    }

});

商店：

    Ext.define('MyApp.store.MyJsonStore', {
    extend: 'Ext.data.Store',

    config: {
        data: [
            {
                work: {
                    agent: {
                        activeFlag: 'false',
                        shiftId: '0',
                        id: '0',
                        deleteFlag: 'false'
                    },
                    id: '124',
                    status: 'Unassigned',
                    assignment: {
                        pnr: {
                            locator: 'ABCDEF',
                            connectTime: '0',
                            id: '0'
                        },
                        id: '123',
                        alerts: 'Delay',
                        customers: [
                            {
                                lastName: 'XYZ',
                                firstName: 'MNO'
                            },
                            {
                                lastName: 'PQR',
                                firstName: 'STU '
                            }
                        ]
                    }
                }
            },
            {
                work: {
                    agent: {
                        activeFlag: 'false',
                        shiftId: '0',
                        id: '0',
                        deleteFlag: 'false'
                    },
                    id: '124',
                    status: 'Unassigned',
                    assignment: {
                        pnr: {
                            locator: 'ABCDEF',
                            connectTime: '0',
                            id: '0'
                        },
                        id: '123',
                        alerts: 'Delay',
                        customers: [
                            {
                                lastName: 'ANY',
                                firstName: 'KLJ'
                            },
                            {
                                lastName: 'CHE',
                                firstName: 'MAK'
                            }
                        ]
                    }
                }
            }
        ],
        storeId: 'MyJsonStore',
        proxy: {
            type: 'ajax',
            reader: {
                type: 'json'
            }
        },
        fields: [
            {
                name: 'work'
            }
        ]
    }
});

如果您像我一样使用配置，则可以逐步添加模型和关联以及ajax加载，并进行全面测试，这将有助于您发现问题所在。

另外，在处理JSON数据时，您可能要考虑使用Json Lint之类的工具，您发布的原始JSON Blob难以阅读且格式不正确，所有这些都使开发变得更加困难。