ExtJS 4.0.7加载完整TreePanel [英] ExtJS 4.0.7 Load complete TreePanel

问题描述

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

  {
data：{
children：[
 {
text：OS，
leaf：false，
children：[
 {
text 
leaf：false，
children：[
 {
text：hostname.int.com，
leaf 
children：[] 
} 
] 
} 
] 
} 
] 
} 
} 
  

它不适用于以下商店配置（或任何其他我尝试过）

  Ext.define（'My.store.SysInfo'，{
 extends：'Ext.data.TreeStore '，
 model：'My.model.SysInfo'，
 
 proxy：{
 type：'ajax'，
 url：'/sysinfo/getSysInfo.php '，
 reader：{
 root：'data 
} 
} 
}）; 
  

该模型具有以下代码：

  Ext.define（'My.model.SysInfo'，{
 extends：'Ext.data.Model'，
 fields：['text'] 
}）; 
  

使用此配置添加treepanel时，不起作用：

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

解决方案

你可以做到这一点。但是你的json似乎有一个问题。

你的json的根是数据，但按顺序为了正确加载嵌套数据，您的根和所有子级属性需要相同。由于您将读者的根定义为数据，您应该将json中的所有孩子替换为数据。

请查看此问题，如果你想更深入地了解它，那么所有这一切也可以看看这个问题。你也可以看看这个工作的JsFiddle 。

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

  reader：{
 type：'json' 
 // root：'children'//没有真正的需要这个孩子是默认的。 
} 
  

这个json应该正确加载：

  {
children：[
 {
text：OS，
leaf ，
children：[
 {
text：Hostname，
leaf：false，
children：[
 {
text：hostname.int.com，
leaf：true，
children：[
 
] 
} 
] 
} 
] 
} 
] 
} 
  

I am in trouble with the ExtJS 4.0.7 TreePanel. I would like to load the complete tree from on JSON request. The request returns the following:

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

With it doesn't work with the following store configuration (or any other i've tried)

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

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

The Model has the following code:

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

When adding a treepanel with this configuration, it doesn't work:

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

By opening a node, ExtJS always loads the whole tree from it's root node into the subnode by requesting it via ajax, instead of showing the preloaded data. How can i achieve, that it loads the "Hostname" node by opening "OS"?

解决方案

You can definitely do that. But there seems to be an issue with your json.

The root of your json is data, but in order for the nested data to load correctly, your root and all children properties need to be the same. Since you have defined your reader's root as data, you should replace all children in your json to data.

Please look at this question, and if you fancy a deeper understanding of it all also look at this question. You can also have a look at this working JsFiddle.

If you define your reader like so:

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

This json should load correctly:

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

                    ]
                 }
              ]
           }
        ]
     }
  ]
}

这篇关于ExtJS 4.0.7加载完整TreePanel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！