Question

我正在使用Ext JS 6，试图让网格为每个区域，国家和城市排成一行。我无法控制我的后端和我的JSON格式（见下文）。我想我的商店是正确的（见下文）。我想知道我需要做什么才能在网格中显示每个嵌套项的记录。 Ext JS被确定在该网格中只有一条记录。我真正的问题是我的模型应该是什么样的？

JSON

{
  "locations" : [
    {
      "type" : "area",
      "name" : "Middle East",
      "country" : [
        {
          "type" : "country",
          "name" : "Afghanistan",
          "city": [
            {
              "type" : "city",
              "name" : "Bagram",
              "data" : [
                {
                  "data1" : 5,
                  "data2" : 10
                },
                {
                  "data1" : 2,
                  "data2" : 9
                }
              ]
            },
            {
              "type" : "city",
              "name" : "Kabul",
              "data" : [
                {
                  "data1" : 3,
                  "data2" : 7
                },
                {
                  "data1" : 6,
                  "data2" : 2
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

存储

Ext.define('App.store.Locations', {
  extend: 'Ext.data.Store',
  model: 'App.model.Location',
  proxy: {
    type: 'ajax',
    url: 'data/location.json',
    reader: {
      type: 'json',
      rootProperty: 'locations'
    }
  },
  autoLoad: true
});

Answer 1

我认为你必须使用Ext.data.reader.Reader.transform()，如下所示：

Ext.define('App.store.Locations', {
    extend: 'Ext.data.Store',
    model: 'App.model.Location',
    proxy: {
        type: 'ajax',
        url: 'data/location.json',
        reader: {
            type: 'json',
            rootProperty: 'locations',
            transform: {
                fn: function(rawData) {
                    //Your parse data logic here
                    var data = [],
                    locationTypes = ['area', 'country', 'city'],
                    parseData = function(dataPart) {
                        data.push({
                            type: dataPart['type'],
                            name: dataPart['name']
                        });
                        for(var i = 0; i < locationTypes.length; ++i) {
                            if(Object.prototype.hasOwnProperty.call(dataPart, locationTypes[i])) {
                                for(var j = 0; j < dataPart[locationTypes[i]].length; ++j) {
                                    parseData(dataPart[locationTypes[i]][j]);
                                }
                            }
                        }
                    };

                    for(var i = 0; i < rawData.length; ++i) {
                        parseData(rawData['locations'][i]);
                    }

                    return (data);
                }
            }
        }
    },
    autoLoad: true
});

选中此working fiddle

使用嵌套JSON时，ExtJS在Gird中创建多行

1 个答案: