0

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 つの「顧客」配列があり、内部に複数の顧客がいます

リストの別々の行に「顧客」を表示したいのですが、単一の「作業」のすべての顧客を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} '
               }]


    }
});

ここに私のStoreList.jsがあります：

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

    }
});

誰でも私を助けてください。ありがとう。

4

1 に答える 1

0

これはあなたが求めていたものですか？

ここからダウンロード

作業中のスクリーンショット

これは非常に単純なモックアップですが、モデルの関連付けが混乱していると思います。

リスト：

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 は読みにくく、フォーマットも適切ではなく、これらすべてが開発をより困難にしています。

于 2013-03-26T17:06:40.553 に答える