TREELOADER：不向儿童节点发射Ajax请求？

StackOverflow https://stackoverflow.com/questions/3514337

题

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

我可以正常工作，以便将树面板正确填充，但是当我扩展非叶子节点时，它似乎并没有做任何特别的事情。

根据我阅读的内容，它应该使用数据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: [ ]
      }
]

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

有帮助吗？

解决方案

它没有填充非叶型treen脚，因为在您的JSON中，没有孩子。

您可以做的是重新加载根节点，传递其他参数（ID），以获取您希望获得结果的子文件夹。

在单击或扩展异步的事件时，您需要重新加载根。为您想重新加载树的ID子文件夹（ClickEdval）喂食ID子文件夹。

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（如书面）不会返回任何孩子（没有明显的层次结构/参考存在）。为了解释正在发生的事情，请您通过一个简单的Treepanel示例对我有帮助。

首先是extjs组件，特雷帕内尔本身。在最简单的层面上，您可以这样设置UN：

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

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

根节点设置为异步（即，当您单击它时，它将从外部源动态加载其子女），并给定ID值“ root-node”（或任何您想要的）。此ID很重要。当了解异步Treepanels的操作时，您应该注意到，当节点扩展时，默认情况下，将邮政请求发送到panels loader/dataUrl（在这种情况下为“ sourceofnodestructure.php'），该请求包含单击的ID， ID以称为“节点”的变量传递。然后，服务器端脚本需要读取此内容（即使用$ _request ['node']中的PHP读取此信息），并为单击节点的childeren表示相应的JSON。

IE（再次，在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的第二部分都是节点结构。在上面的示例中，这是由服务器端脚本-Nodestructure.php馈送的。 PHP是我首选提供节点的方法，因为它使我可以应用自己的处理规则，并以更灵活的方式为节点分配其他属性。因为我不确定您是否正在使用PHP（'http：// localhost：9000/application/listfiles'），我不会详细介绍一下 - 但是，您应该仔细介绍脚本如何识别点击节点，并确保您记住单击节点的ID是在帖子变量“节点”中发送到脚本的脚本，您需要捕获此问题并适当输出儿童。

让我知道您是否想要一个PHP的示例，可以用来处理此操作。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top