EXTJS 5.1 JSON非常簡單的TreeStore

Question

我環顧四周，但我仍然不明白如何正確創建treestore。 我有這個非常簡單的JSON，我從服務器獲取：

{ 
    "Results": [ 
    { 
     "name": "John", 
     "age": 23, 
     "cars": [ 
     { 
      "name": "Clio", 
      "brand": "Renault" 
     }, 
     { 
      "name": "Class S", 
      "brand": "Mercedes" 
     } 
     ] 
    }, 
    { 
     "name": "Michel", 
     "age": 42, 
     "cars": [ 
     { 
      "name": "Qashqai", 
      "brand": "Nissan" 
     } 
     ] 
    } 
    ] 
} 

我有兩個型號：

Ext.define('Person', { 
    extend: 'Ext.data.Model', 
    fields: [ 'name', 'age'] 
}); 

Ext.define('Car', { 
    extend: 'Ext.data.Model', 
    fields: [ 'name', 'brand'] 
}); 

現在我知道我要創建一個樹商店，但在所有的例子我已經看到，json中總是有一個「兒童」屬性，我沒有。

如何使用以下json創建樹存儲？

非常感謝:)！

Answer 1

你總是可以建立類似如下的數據正確格式的對象：

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 

     var myTreeData = { 
       "Results": [{ 
        "name": "John", 
        "age": 23, 
        "cars": [{ 
         "name": "Clio", 
         "brand": "Renault" 
        }, { 
         "name": "Class S", 
         "brand": "Mercedes" 
        }] 
       }, { 
        "name": "Michel", 
        "age": 42, 
        "cars": [{ 
         "name": "Qashqai", 
         "brand": "Nissan" 
        }] 
       }] 
      }, 
      modifiedData = { 
       expanded: true, 
       children: [] 
      }; 
     myTreeData.Results.forEach(function (result) { 
      var newChildrenArray = []; 
      result.cars.forEach(function (car) { 
       var newChild = { 
        text: car.name, 
        leaf: true 
       }; 
       newChildrenArray.push(newChild); 
      }); 
      var person = { 
       text: result.name, 
       leaf: (newChildrenArray.length > 0 ? false : true), 
       children: newChildrenArray 
      }; 
      modifiedData.children.push(person); 
     }); 

     var store = Ext.create('Ext.data.TreeStore', { 
      root: modifiedData 
     }); 

     Ext.create('Ext.tree.Panel', { 
      title: 'Simple Tree', 
      width: 200, 
      height: 150, 
      store: store, 
      rootVisible: false, 
      renderTo: Ext.getBody() 
     }); 
    } 
}); 

演示在這裏：https://fiddle.sencha.com/#fiddle/j05