android - listView 中的 JSON 响应

Question

我正在学习 secha touch，我想创建一个页面，在用户输入登录凭据后，将收到 JSON 响应，如下所示

  {"items":[{"id":"78e221c8-bbc1-4754-8471-48c863886869","createTime":"2014-05-22T14:57:39.039Z","createUser":"Jon","status":"SAVED","changeTime":"2014-05-22T14:57:39.039Z","changeUser":"Jon","projectId":"63886869-bbc1-4754-8471-48c878e221c8","reportVersionNumber":"1","reportVersionName":"First Version","reportName":"FooBarBaz","reportHash":"qiyh4XPJGsOZ2MEAyLkfWqeQ"}],"totalItems":1

}

目前我已经创建了一个页面，我在其中使用了一个 listItem 并显示其中来自简单数组的项目，其中数据已被编码并使用 itemTPL 来获取它像这样<div class="arHeadline">{projectId}

我现在的店铺是

 data: [
                {
                    Headline: 'Panel',
                    Author: 'Sencha',
                    Content: 'Panels are most useful as Overlays - containers that float over your appl..'
            }

但我想从 json 中获取数据，所以我创建了一个 JSON 存储

Ext.define('MobileChecklist.store.MyJsonPStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MobileChecklist.model.MyModel',
        'Ext.data.proxy.JsonP',
        'Ext.data.reader.Json',
        'Ext.data.Field'
    ],

    config: {
        autoLoad: true,
        data: [
            {
                items: [
                    {
                        id: '78e221c8-bbc1-4754-8471-48c863886869',
                        createTime: '2014-05-22T14:57:39.039Z',
                        createUser: 'Jon',
                        status: 'SAVED',
                        changeTime: '2014-05-22T14:57:39.039Z',
                        changeUser: 'Jon',
                        projectId: '63886869-bbc1-4754-8471-48c878e221c8',
                        reportVersionNumber: '1',
                        reportVersionName: 'First Version',
                        reportName: 'FooBarBaz',
                        reportHash: 'qiyh4XPJGsOZ2MEAyLkfWqeQ'
                    }
                ],
                totalItems: 1
            }
        ],
        model: 'MobileChecklist.model.MyModel',
        storeId: 'MyJsonPStore',
        proxy: {
            type: 'jsonp',
            url: 'data/getPort.json',
            reader: {
                type: 'json',
                idProperty: 'id',
                rootProperty: 'items',
                totalProperty: 'totalItems',
                record: 'items'
            }
        },
        fields: [
            {
                name: 'reportName'
            },
            {
                name: 'projectId'
            }
        ]
    }
});

我的模型是

Ext.define('MobileChecklist.model.MyModel', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field'
    ],

    config: {
        fields: [
            {
                mapping: 'items.reportName',
                name: 'reportName',
                type: 'string'
            },
            {
                mapping: 'items.projectId',
                name: 'projectId',
                type: 'string'
            }
        ]
    }
});

我想解码 json 响应并将其显示在 ListItem 中，就像我对字符串数组所做的那样我该怎么做请帮忙

编辑:如果我从我的 json 响应中删除项目并使它像一个数组而不是对象，它会工作并在 ListView 中显示它

[{"id":"78e221c8-bbc1-4754-8471-48c863886869","createTime":"2014-05-22T14:57:39.039Z","createUser":"Jon","status":"SAVED","changeTime":"2014-05-22T14:57:39.039Z","changeUser":"Jon","projectId":"63886869-bbc1-4754-8471-48c878e221c8","reportVersionNumber":"1","reportVersionName":"First Version","reportName":"FooBarBaz","reportHash":"qiyh4XPJGsOZ2MEAyLkfWqeQ"}],"totalItems":1}]

Answer 1

在 Controller 中使用 data.items 设置商店数据，如下所示:-

       Ext.Ajax.request({
            url: someurl,
            params: {
                format: "json"
            },
            success: function(response) {
               Ext.getStore("MyJsonPStore").setData(response.items);
            },
            failure: function(err) {
               console.log("Error", err);
            }
        });

这是处理 json 数据的方式。

发现您的问题，将您的商店代理更改为:-

 proxy: {
            type: 'rest',  //change it
            url: 'data/getPort.json',
            reader: {
                type: 'json',
                idProperty: 'id',
                rootProperty: 'items',
                totalProperty: 'totalItems'
            }
        }

无需映射数据。