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":[ 

        ] 
       } 
       ] 
      } 
     ] 
    } 
    ] 
}