自动加载多层次嵌套JSON在Sencha Touch

Auto-Loading Multiple Levels of Nested JSON in Sencha Touch

本文关键字：Sencha Touch JSON 嵌套 加载 多层次      更新时间：2023-09-26

我在加载包含多层嵌套的JSON时遇到了一个问题。我有一个模型(Location)，它有一组模型(Items)与每个模型相关联。

<

项模型/strong> 

Ext.define('SenchaSandbox.model.Item', {
    extend: 'Ext.data.Model',
    requires: ['Ext.data.Field'],
    config: {
        fields: ['id', 'name']
    }
});
<

位置模型/strong> 

Ext.define('SenchaSandbox.model.Location', {
    extend: 'Ext.data.Model',
    requires: ['Ext.data.Field', 'Ext.data.association.HasMany'],
    uses: ['SenchaSandbox.model.Item'],
    config: {
        fields: ['id', 'name'],
        associations: [{
            type: 'hasMany',
            model: 'SenchaSandbox.model.Item',
            autoLoad: true,
            name: 'items'
        }]
    }
});

位置存储 

Ext.define('SenchaSandbox.store.LocationStore', {
    extend: 'Ext.data.Store',
    requires: [
        'Location',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],
    config: {
        model: 'SenchaSandbox.model.Location',
        storeId: 'LocationStore',
        proxy: {
            type: 'ajax',
            url: 'DummyGood.json',
            reader: {
                type: 'json',
                rootProperty: 'location'
            }
        }
    }
});

在理想情况下，如果来自服务器的JSON如下所示，Sencha将自动加载位置及其相关项。

好JSON 

{"location": [
    {
        "id": 100,
        "name": "Location 1",
        "items": [
            {
                "id": 1,
                "name": "Item A"
            },
            {
                "id": 2,
                "name": "Item B"
            }
        ]
    },
    {
        "id": 200,
        "name": "Location 2",
        "items": [
            {
                "id": 3,
                "name": "Item A"
            },
            {
                "id": 4,
                "name": "Item C"
            }
        ]
    }
]}

但是，服务器实际上返回JSON，其中包含一些额外的嵌套，如下所示:

Bad (Server) JSON

{"CollectionLocation": {
    "collection": [
        {
            "id": 100,
            "name": "Location 1",
            "items": {
                "collection": [
                    {
                        "id": 1,
                        "name": "Item A"
                    },
                    {
                        "id": 2,
                        "name": "Item B"
                    }
                ]
            }
        },
        {
            "id": 200,
            "name": "Location 2",
            "items": {
                "collection": [
                    {
                        "id": 3,
                        "name": "Item A"
                    },
                    {
                        "id": 4,
                        "name": "Item C"
                    }
                ]
            }
        }
    ]
 }}

假设我无法控制生成此JSON的服务器代码，那么以干净的方式加载此数据的选项是什么?我还能利用Sencha的自动加载功能吗?还是我需要自己编写代码来创建子存储并使用子模型填充它?

我在这里创建了一个Fiddle https://fiddle.sencha.com/#fiddle/7n6，以防有人有一分钟的时间来摆弄这个样本。

用Ext.data.TreeStore代替Ext.data.Store

http://docs-origin.sencha.com/touch/2.3.1/# !/api/Ext.data.TreeStore

相关文章：