从 JSON 抓取树

Question

我希望在我的视图中获得一个呈现为树的 JSON 对象。我的代码在一个名为 /app/view/main/Tree.js 的文件中

Ext.define('SGSS.view.main.Tree', {    
   extend: 'Ext.tree.Panel',
   alias: 'viewmodel.tree',
   xtype: 'SimpleTree',
   width: 400,
   height: 250,
   store: {
       root: {
           expanded: true
       },
       proxy: {
           type: 'ajax',
           url: '/cgi-bin/uiconnector',
           reader: {
               type: 'json',
               rootProperty: 'assets'
           }
       }
   }
});

当我调用引用此内容的页面时，我看到的屏幕看起来与预期的有所不同：

它只是将无限期地继续存在的空白文件夹。不是我想到的 JSON 对象。对我做错了什么有什么想法吗？

我的 JSON 如下：

{
  "assets": {
    "batteryzone": [
  {
        "id": "10001",
        "type": "batteryzone",
        "label": "BZ1",
        "parentid": "1001",
        "model": "sim",
        "alarmsev": "None",
        "extant": "true",
        "invertersonline": "0",
        "hvaconline": "0",
        "racksonline": "0",
        "interfacerev": "0",
        "plcrevision": "0",
        "numbatteryracks": "20",
        "dcvoltage": "0.0",
        "dcpower": "0.0",
        "averagesoc": "0.0",
        "storedenergy": "0.0",
        "startupsubstate": "0",
        "startupsequence": "0",
        "recoverymode": "false",
        "tempmaxconnected": "-4.0",
        "chargecapacity": "0",
        "dischargecapacity": "0",
        "dccurrent": "0.0",
        "containerenabled": "false",
        "hicell": "3.016",
        "locell": "3.011",
        "nameplateenergy": "1950",
        "recoveryrunning": "false",
        "currinputs": []
  },
  {
        "id": "10002",
        "type": "batteryzone",
        "label": "BZ2",
        "parentid": "1001",
        "model": "sim",
        "alarmsev": "None",
        "extant": "true",
        "invertersonline": "0",
        "hvaconline": "0",
        "racksonline": "0",
        "interfacerev": "0",
        "plcrevision": "0",
        "numbatteryracks": "20",
        "dcvoltage": "0.0",
        "dcpower": "0.0",
        "averagesoc": "0.0",
        "storedenergy": "0.0",
        "startupsubstate": "0",
        "startupsequence": "0",
        "recoverymode": "false",
        "tempmaxconnected": "-4.0",
        "chargecapacity": "0",
        "dischargecapacity": "0",
        "dccurrent": "0.0",
        "containerenabled": "false",
        "hicell": "3.016",
        "locell": "3.011",
        "nameplateenergy": "1950",
        "recoveryrunning": "false",
        "currinputs": []
      }
    ]
  }
}

我错过了什么吗？ （我的意思是，显然我是！）

Answer 1

您使用的 JSON 格式不是树面板形成树所需的正确树格式。所需的数据格式如下所示：

       {
            expanded: true,
            children: [{
                text: 'SFO   ✈  DFW',
                duration: '6h 55m',
                expanded: true,
                children: [{
                    text: 'SFO  ✈  PHX',
                    duration: '2h 04m',
                    leaf: true
                }, {
                    text: 'PHX layover',
                    duration: '2h 36m',
                    isLayover: true,
                    leaf: true
                }, {
                    text: 'PHX  ✈  DFW',
                    duration: '2h 15m',
                    leaf: true
                }]
            }]
        }

这里要指定的 rootProperty 是 'children'，如以下部分中的 docs for the treestore 所述：

读取嵌套数据

要让树读取嵌套数据，Ext.data.reader.Reader 必须是 配置了根属性，因此读者可以找到嵌套数据 对于每个节点（如果未指定根，则默认为 '孩子们'）。这将告诉树寻找任何嵌套的树节点 使用相同的关键字，即“儿童”。如果在 配置确保任何具有子节点的嵌套节点都具有相同的 名字。

另请注意，leaf: true 已用于表示该节点是树的终端/叶节点，即该节点不包含子节点。

有关数据格式的更多示例，您可以参考API。