ExtJS Erstellen mehrerer Zeilen in Gird bei Verwendung verschachtelter JSON

Question

Ich verwende Ext JS 6, versuchen, ein Raster zu erhalten, eine Zeile für jeden Bereich, Land und Stadt zu haben. Ich habe keine Kontrolle über mein Backend und das Format meines JSON (siehe unten). Ich denke, ich habe mein Geschäft korrekt (siehe unten). Ich frage mich, was ich tun muss, um einen Datensatz für jedes verschachtelte Element im Raster anzuzeigen. Ext JS hat nur einen Datensatz in diesem Raster. Meine eigentliche Frage ist, wie soll mein Modell aussehen?

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 
       } 
       ] 
      } 
      ] 
     } 
     ] 
    } 
    ] 
} 

Shop

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

Ich glaube, Sie haben Ext.data.reader.Reader.transform() zu verwenden, wie folgt aus:

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 
}); 

prüfen dieses working fiddle