从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必须是   配置了root属性，因此读者可以找到嵌套数据   对于每个节点（如果未指定root，则默认为   '孩子'）。这将告诉树查找任何嵌套的树节点   使用相同的关键字，即“儿童”。如果在中指定了根   config确保具有子项的任何嵌套节点具有相同的   名。

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

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