TreeLoader：不为子节点触发ajax请求？

好的，我有这个网站，我把它放在play框架中。它基本上连接到后端的FTP站点，检索文件夹/文件列表，并将其作为JSON发送到基本的ExtJS前端

我让它工作，以便正确填充树面板，但当我展开非叶节点时，它似乎没有做任何特殊的事情

根据我读到的内容，它应该使用数据url，并将带有节点id的节点参数传递给该数据url，以获取子节点的数据，但在firebug中，我看不到为该数据发送任何请求

我需要做什么才能允许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);
                   }
               }
           }
       ]
   });
});

JSON中返回的id是我要展开的子目录的完整路径，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: [ ]
      }
]

---

最后一项是我希望动态加载子项的文件夹示例

它不会填充非叶树节点，因为在JSON中没有子节点

您可以做的是重新加载根节点，为要获取结果的子文件夹传递附加参数（ID）

在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});

---

附加说明：您可能需要内置一些导航控件来使用此方法向上移动树。

如前一张海报所述，返回的JSON（如所述）不会返回任何子项（不存在明显的层次结构/引用）。为了解释正在发生的事情，我可能会帮助您了解一个简单的树面板示例

首先，ExtJS组件，树面板本身。在最简单的级别上，您可以这样设置un：

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

通过这段代码，您可以在最基本的级别上创建treepanel组件（您需要添加有关布局、格式等的其他设置-按照原始帖子中的代码，以使其适合您的设置），并只添加工作所需的最低设置

根节点被设置为异步（即，当您单击它时，它将从外部源动态加载其子节点），并给定id值“根节点”（或任何您想要的）。这个id很重要。在理解异步树面板的操作时，您应该注意，在展开节点时，默认情况下会向面板加载器/dataurl（在本例中为'sourceofnodestructure.php'）发送一个POST请求，其中包含所单击节点的id，该id在名为'node'的变量中传递。然后，服务器端脚本需要读取此内容（即在php中使用$_REQUEST['node']），并提供相应的JSON，表示单击节点的子节点

i、 e.（同样，在PHP中）：

任何树面板的第二部分是节点结构。在上面的示例中，这是由服务器端脚本sourceofnodestructure.php提供的。PHP是我提供节点服务的首选方式，因为它允许我应用自己的处理规则，并以更灵活的方式为节点分配额外的属性。由于我不确定您是否在使用php（“”），因此我不会详细介绍它-但是，您应该了解脚本如何识别单击的节点，并确保记住已单击节点的id已发送到POST变量“node”中的脚本，您需要捕获此项并酌情输出子项

---

请告诉我您是否想要一个可以用来处理此问题的PHP示例。

好的，我将尝试一下，看看是否可以让它工作。谢谢你的回答。我想我会朝着一个稍微不同的方向走，但是因为你为我试图实现的目标提供了最好的答案，我将奖励你。所以基本上因为我没有指定任何子元素，所以当我扩展节点时，它不认为它需要进行异步调用？对于我来说，填充每个父节点的子节点将是服务器上带宽的巨大浪费，因为树的内容是从FTP服务器中提取的。我认为我需要做的是将文件夹与文件分离到两个树面板中，并钩住文件夹树上的选定事件，并触发一个ajax调用，该调用将检索该文件夹的文件并填充文件树。是-因为没有指定子元素-扩展任何父节点时都找不到任何子元素。至于带宽-我知道在PHP中，你可以很容易地创建一个目录刮板，当根节点被扩展时，它调用PHP在顶层刮板文件/文件夹，当子文件夹被扩展时，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...