ExtJS入れ子JSON使用時にGirdで複数の行を作成

Question

私はExt JS 6を使用して、グリッドに各エリア、国、都市の行を持たせようとしています。私は私のバックエンドと私のJSON（下記参照）のフォーマットを制御することはできません。私は私の店が正しいと思います（下記参照）。私はグリッド内の各ネストされた項目のレコードを表示するために何をする必要があるのだろうかと思います。 Ext JSは、このグリッド内に1つのレコードしか持たないと判断されます。私の本当の疑問は、私のモデルはどのように見えますか？

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