代码之家 › 专栏 › 技术社区 › Jason Miesionczek

TreeLoader:没有为子节点触发ajax请求?

playframework extjs json ajax

1

Jason Miesionczek · 技术社区 · 15 年前

好吧,我有一个网站,我正在游戏框架中整合。它基本上连接到后端的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: [ ]
      }
]

2 回复 | 直到 15 年前

1

3

It Grunt 15 年前

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

可以做的是重新加载根节点,为要获取结果的子文件夹传递附加参数(ID)。

在AsyncTreeNode的click或expand事件上,需要重新加载根。为要重新加载树的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});

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

2

1

SW4 15 年前

如前一篇文章所述,返回的JSON(如所写)不会返回任何子级(不存在明显的层次结构/引用)。为了解释正在发生的事情,我将通过一个简单的treepanel示例来帮助您。

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

通过这段代码,您可以在最基本的级别上创建treepanel组件(您需要添加关于布局、格式等的其他设置-按照您原来帖子中的代码,以便它适合您的设置),并且只添加工作所需的最低设置。

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

i、 e.(同样,用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...

http://localhost:9000/application/listFiles '),我不会详细介绍它-但是,您应该了解脚本如何标识单击的节点,并确保记住已单击节点的id被发送到POST变量'node'中的脚本,您需要适当地捕获该节点并输出子节点。

让我知道如果你想一个PHP的一个例子可以用来处理这个。