ExtJS 4.0.7加载完成TreePanel

Question

我遇到了ExtJS 4.0.7 TreePanel的麻烦。我想从JSON请求中加载完整的树。请求返回如下：

{ 
    "data": { 
    "children": [ 
     { 
     "text": "OS", 
     "leaf": false, 
     "children": [ 
      { 
      "text": "Hostname", 
      "leaf": false, 
      "children": [ 
       { 
       "text": "hostname.int.com", 
       "leaf": true, 
       "children": [] 
       } 
      ] 
      } 
     ] 
     } 
    ] 
    } 
} 

有了它不与下面的存储配置工作（或任何其他我试过）

Ext.define('My.store.SysInfo', { 
extend: 'Ext.data.TreeStore', 
    model: 'My.model.SysInfo', 

    proxy : { 
     type : 'ajax', 
     url : '/sysinfo/getSysInfo.php', 
     reader : { 
      root : 'data' 
     } 
    } 
}); 

模型具有下面的代码：

Ext.define('My.model.SysInfo', { 
    extend: 'Ext.data.Model', 
    fields: ['text'] 
}); 

使用此配置添加树面板时，它不起作用：

{ 
    xtype: 'treepanel', 
    name : 'sysinfo', 
    height: '100%', 
    store: 'My.store.SysInfo', 
    lines: true, 
    autoScroll : true, 
    expanded : true, 
    rootVisible: false, 
    folderSort: true, 
    multiSelect: false, 
    useArrows: true, 
} 

通过打开一个节点，ExtJS总是通过请求它通过ajax，而不是显示预加载的数据，从它的根节点将整个树加载到子节点中。我如何实现，它打开“OS”加载“主机名”节点？

Answer 1

你绝对可以做到这一点。但是你的json似乎存在一个问题。

您的json的根目录是data，但为了使嵌套数据正确加载，您的根目录和所有子目录属性必须相同。由于您已将读者的根目录定义为data，因此应该将json中的所有children替换为data。

请看this question，如果你想更深入的了解它也都看看this question。你也可以看看这个working JsFiddle。

如果你定义你的读者像这样：

reader : { 
     type: 'json', 
     // root : 'children' // no real need for this a children is the default. 
    } 

此JSON应该正确加载：

{ 
    "children":[ 
    { 
     "text":"OS", 
     "leaf":false, 
     "children":[ 
      { 
       "text":"Hostname", 
       "leaf":false, 
       "children":[ 
       { 
        "text":"hostname.int.com", 
        "leaf":true, 
        "children":[ 

        ] 
       } 
       ] 
      } 
     ] 
    } 
    ] 
}