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

我是SenchaTouch2新手，在列表中以单独的行显示嵌套的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'}
    }

});

Customers.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} '
               }]


    }
});

---

谁能帮帮我吗。谢谢。

这就是你想要的吗

这是一个非常简单的模型，但它应该会帮助您，我认为您的模型关联是令人困惑的事情

名单：

如果您让配置像我一样工作，那么您可以逐渐添加您的模型和关联，以及您的ajax加载和测试，这将有助于您发现问题所在

---

此外，您可能需要考虑使用JSON数据时使用的工具，您所发布的原始JSON BLB难以阅读和格式不正确，所有这些都会使开发更加困难。p> 您的JSON

“警报”：“延迟”“客户”中缺少逗号：[

在您的

作业

对象更新json文件后，您还有一个前导逗号。我添加并回答了您的问题，然后重新阅读了您的问题，我认为我添加的答案没有用，您是否试图为每个客户获取一个列表项？您是否需要按工作分组？您能否在问题中提供更多详细信息，您已经发布了一个工作解决方案在上，只给了我们一句关于你努力实现的目标的话。谢谢，但我想把名字放在一行，即…列表应该有四行。更新了我的问题。

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

    }
});

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