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

Question

好的，我有这个网站，我正在将其放在游戏框架中。它基本上连接到后端的 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 输出的 sn-p：

[
      {
          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

它没有填充非叶树节点，因为在您的 JSON 中没有子节点。

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

在 AsyncTreeNode 的单击或展开事件中，您需要重新加载根。将您想要重新加载树的 ID 子文件夹 (clickedVal) 提供给 reload 方法。

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

带您浏览此代码，它的作用是在最基本的级别创建树形面板组件（您将需要添加有关布局、格式等的其他设置 - 根据您原始帖子中的代码，使其符合您的设置），并仅添加工作所需的最低设置。

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

即（同样，在 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...

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

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