TreeLoader：未觸發子節點的Ajax請求？

Question

好吧，我有這個網站，我在放在框架中。它基本上連接到後端的FTP站點，檢索文件夾/文件列表，並將其作爲JSON發送到基本的ExtJS前端。

我讓它工作，以便樹面板正確填充，但它似乎沒有做任何特別的時候，我展開一個非葉節點。

根據我讀過的內容，它應該使用數據url，並將節點參數與節點的id傳遞給該數據url以獲取子節點的數據，但是在螢火蟲中，我沒有查看針對該數據發送的任何請求。

我需要做些什麼來允許ajax調用觸發，以便有節點的節點在節點展開時動態獲取它們？

下面是引用相關代碼：

Ext.onReady(function() { 



    new Ext.Viewport({ 
     layout: 'border', 
     defaults: { 
     height: 100, 
     width: 250, 
     collapseMode: 'mini' 
     }, 
     items : [ 
      { 
       region: 'center', 
       margins: '5 5 0 0', 
       contentEl: 'center-content' 
      }, 
      { 
       id: 'file-tree', 
       region: 'west', 
       title: 'Files', 
       split: true, 
       collapsible: true, 
       xtype: 'treepanel', 
       autoScroll: true, 
       loader: new Ext.tree.TreeLoader({ 
        dataUrl: 'http://localhost:9000/application/listFiles', 


       }), 

       root: new Ext.tree.AsyncTreeNode({ 
        expand: true, 
        text: "/", 
        id: "/" 
       }), 
       rootVisibile: true, 
       listeners: { 
        click: function(n) { 
         Ext.Msg.alert('File Tree Click', 'You clicked: ' + n.attributes.id); 
        } 
       } 
      } 
     ] 
    }); 
}); 

中的id JSON返回是子目錄的完整路徑我想擴大，以及listfiles行動將採取的參數和返回合適文件。

按照要求，這裏是JSON輸出的一個片段：

[ 
     { 
      id: "/./", 
      text: "./", 
      leaf: false, 
      children: [ ] 
     }, 
     { 
      id: "/../", 
      text: "../", 
      leaf: false, 
      children: [ ] 
     }, 
     { 
      id: "/.ftpquota", 
      text: ".ftpquota", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/.htaccess", 
      text: ".htaccess", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/022610.html", 
      text: "022610.html", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/Gail/", 
      text: "Gail/", 
      leaf: false, 
      children: [ ] 
     } 
] 

這最後一個項目是我期待動態加載的孩子到該文件夾​​的一個例子。

Answer 1

它沒有填充非葉treenodes，因爲在你的JSON中，沒有孩子。

你可以做的是重新加載根節點，爲你想得到結果的子文件夾傳遞額外的參數（ID's）。

在點擊或展開AsyncTreeNode的事件時，您需要重新加載根目錄。爲重新加載方法提供您想要重新加載樹的ID子文件夾（clickedVal）。

myTreePanel.loader = new Ext.tree.TreeLoader({ 
    dataUrl: 'http://localhost:9000/application/listFiles', 
    requestMethod: 'POST', 
    listeners: { 
     beforeload: function() { 
     this.baseParams.subFolderID = clickedVal; 
      } 
    } 
}); 
myTreePanel.root.reload({baseParams: {subFolderID: clickedVal}); 

附加說明：您可能需要構建一些導航控件以使用此方法移回樹。

Answer 2

正如上一張海報所述，返回的JSON，如書面所示，不會返回任何子級（不存在明顯的層次/引用存在）。爲了解釋發生了什麼，它可能會幫助我通過一個簡單的樹面板示例。

首先是ExtJS組件，樹面板本身。在最簡單的層面，可以設置取消了這樣的：

MYtreepanel=new Ext.tree.TreePanel({ 
     dataUrl: 'sourceofnodestructure.php', 
     root: { 
      nodeType: 'async', 
      id:'root-node' 
      } 
     } 
    }); 

帶你通過這個代碼，這樣做是在最基本的層面上創建TreePanel中成分（你將需要添加有關佈局其他設置，格式等等 - 根據原始文章中的代碼，以便它符合您的設置），並且只添加工作所需的最低設置。

將根節點設置爲異步（即，當您單擊它時，它將從外部源動態加載它的子節點），並給定id值'root-node'（或任何你想要的）。這個ID很重要。在理解異步樹面板的操作時，您應該注意到，當節點展開時，默認情況下POST請求會發送到面板loader/dataurl（在這種情況下爲'sourceofnodestructure。php'）包含被點擊的節點的id，這個id被傳遞給一個名爲'node'的變量。然後，服務器端腳本需要讀取（即在php中使用$ _REQUEST ['node']）並提供相應的JSON，表示點擊節點的childeren。

即（再次，在PHP）：

switch($_REQUEST['node']){ 
case "root-node": 
// output JSON for child nodes under the root node 
break; 
case "child node 1": 
// output JSON for child nodes under the first child node under the root 
break; 
} 
etc etc... 

任何TreePanel中的第二部分是所述節點結構。在上面的例子中，這是由服務器端腳本sourceofnodestructure.php。 PHP是我服務節點的首選方式，因爲它允許我以更靈活的方式應用自己的處理規則併爲節點分配更多屬性。由於我不確定您是否使用php（'http://localhost:9000/application/listFiles'），我不會詳細討論它 - 但是，您應該瞭解您的腳本如何識別單擊的節點並確保您記住點擊的節點的ID被髮送到POST變量'node'中的腳本，您需要捕獲並根據需要輸出子項。

讓我知道你是否想要一個可用於處理這個問題的PHP示例。