TreeLoader: Not firing ajax request for child nodes?

Question

Ok so, i have this site that i am putting together in the play framework. It basically connects to an FTP site on the back end, retrieves a list of folders/files and sends that to a basic ExtJS front-end as JSON.

I have it working so that the Tree Panel gets populated correctly, but it doesn't seem to be doing anything special when i expand a non-leaf node.

Based on what i've read, it should use the data url, and pass a node parameter with the id of the node to that data url to get the data for the child nodes, but in firebug i don't see any requests being sent for that data.

What do i need to do to allow the ajax calls to fire so that nodes that have children will get them dynamically when the node is expanded?

Here is the relevant code for reference:

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

The id returned in the JSON is the complete path to sub directory i would like to expand, and the listfiles action will take that parameter and return the appropriate files.

As requested, here is a snippet of the JSON output:

[
      {
          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: [ ]
      }
]

That last item is an example of the folder that i am looking to dynamically load the children to.

Answer 1

Can you show the JSON output you are getting from that data url?

Answer 2

It is not populating the non-leaf treenodes because in your JSON, there are no children.

What you can do is reload the root node, passing additional parameters (ID's) for the subfolders you would like to get results for.

on the click or expand events for the AsyncTreeNode, you will need to reload the root. Feed the reload method the ID subfolder (clickedVal) you'd like to reload the tree with.

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

Addtional Notes: You'll probably need to build in some navigation controls to move back up the tree using this method.

Answer 3

As mentioned by the previous poster, the returned JSON, as written, would NOT return any children (no apparent hierarchy/referencing is present). To explain what is happening, it may help for me to take you through a simple treepanel example.

First things first- the ExtJS component, the treepanel itself. At its simplest level, you can set un up thus:

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

Taking you through this code, what this does is create the treepanel component at the most basic level (you will need to add additional settings concerning layout, format, etc etc- as per the code in your original post so it fits with your setup), and add only the minimum settings required to work.

The root node is set to asynchronous (i.e. when you click it, it will load its children dynamically from an external source), and given the id value 'root-node' (or whatever you wish). This id is important. When understanding the operation of async treepanels, you should note that when a node is expanded, by default a POST request is sent to the panels loader/dataurl (in this case 'sourceofnodestructure.php') containing the id of the node clicked, this id is passed in a variable called 'node'. The server side script then needs to read this (i.e. in php using $_REQUEST['node']) and serve up the respective JSON denoting the childeren for the clicked node.

i.e. (again, in 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...

The second part of any treepanel is the node structure. In the above example, this is fed by a server side script- sourceofnodestructure.php. PHP is my preferred way of serving up nodes as it lets me apply my own processing rules and assign additional attributes to nodes in a more flexible way. As I am not sure whether you are using php or not ('http://localhost:9000/application/listFiles'), I wont go into detail regarding it - however, you should go through how your script identifies the clicked node and ensure you remember that the id of the clicked node is sent to the script in the POST variable 'node', you need to trap this and output children as appropriate.

Let me know if you would like an example of the PHP one may use to handle this.