来自 JSON 的 EXTJS 5.1 非常简单的 TreeStore

Question

我环顾四周，但仍然不明白如何正确创建树存储。我有一个非常简单的 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 中总是有一个 "children" 属性，我没有。

如何使用以下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

来自 JSON 的 EXTJS 5.1 非常简单的 TreeStore

EXTJS 5.1 VERY SIMPLE TreeStore from JSON

extjs

tree

store

extjs5