Question

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

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

根据我读过的内容，它应该使用数据url，并将带有节点id的node参数传递给该数据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: [ ]
      }
]

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

Answer 1

它没有填充非叶子treenodes，因为在你的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});

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

Answer 2

如上一张海报所述，返回的JSON（如所写的）不会返回任何子节点（不存在明显的层次结构/引用）。为了解释正在发生的事情，我可以帮助您完成一个简单的treepanel示例。

首先是ExtJS组件，即treepanel本身。在最简单的层面上，你可以这样设置：

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

带您浏览此代码，它的作用是在最基本的级别创建treepanel组件（您需要根据原始帖子中的代码添加有关布局，格式等的其他设置等，以便它适合于您的设置），并只添加工作所需的最低设置。

根节点设置为异步（即，当您单击它时，它将从外部源动态加载其子节点），并给定id值'root-node'（或任何您想要的）。这个id非常重要。在理解异步treepanels的操作时，您应该注意到，当展开节点时，默认情况下会向面板加载器/ dataurl（在本例中为'sourceofnodestructure.php'）发送一个POST请求，其中包含单击的节点的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...

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

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

TreeLoader：没有为子节点激发ajax请求？

2 个答案: