ExtJS 4.0.7 加载完整的 TreePanel答案

【问题标题】：ExtJS 4.0.7 Load complete TreePanelExtJS 4.0.7 加载完整的 TreePanel
【发布时间】：2012-08-29 10:59:26
【问题描述】：

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”来加载“主机名”节点？

【问题讨论】：

标签： javascript extjs extjs4 extjs-mvc

【解决方案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":[

                    ]
                 }
              ]
           }
        ]
     }
  ]
}

【讨论】：