Tree creation using TreeNode

[robtcallahan]

Hi folks,

So I my layout working yesterday and I now understand it better. However, I'm stumped again and need your assistance.

I'm reading from a database obtaining a list of user files and folders. I want to load the top set of files/folders only. Then load subsequent folders when the plus sign is clicked. Reason is, it could be a huge hierarchy and I don't want to load it all at once. So I need a way to:

1. Create a tree and define a root node
2. create a set of folders on the root
3. apply events to the folders so that they are loaded and rendered upon clicking
on the plus sign to expand the hierarchy.

So I've attempted 1 and 2 below. It obviously doesn't work and that's why I'm posting.
As for 3, I have no idea right now how to do that.

Here's what I have for 1 and 2:



folderTree = new Tree.TreePanel('folders', {
animate: true,
enableDD: false,
containerScroll: true
});

// set the root node
folderTreeRoot = new Tree.AsyncTreeNode({
text: '/',
draggable: false,
id: 0
});
folderTree.setRootNode(folderTreeRoot);

foldersDS.each(function() {
var node = new Tree.AsyncTreeNode({
text: this.data.text,
draggable: false,
id: this.data.id,
cls: "leaf",
href: "../php/xdrive_get_user_folders.php?user=" + Ext.get("username").dom.focus() + "&folder_id=" + this.data.id,
});
folderTreeRoot.appendChild(node);
});

// render the tree
folderTree.render();
folderTreeRoot.expand(false, false);

[robtcallahan]

I forgot to include this code snippet as well:


foldersDS = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: "../php/get_user_folders.php?user=" + Ext.get("username").dom.value + "&folder_id=0"}),

// the return will be JSON, so lets set up a reader
reader: new Ext.data.ArrayReader(
{ id: 'folder_id' }, [
{name: 'text'},
{name: 'id'},
{name: 'folder_id'},
{name: 'user_id'},
{name: 'parent_folder_id'},
{name: 'folder_name'},
{name: 'folder_type_id'},
{name: 'max_size_bytes'},
{name: 'folder_size_bytes'},
{name: 'create_date', type: 'date', dateFormat: 'Y-m-d'},
{name: 'modify_date', type: 'date', dateFormat: 'Y-m-d'},
{name: 'expire_date', type: 'date', dateFormat: 'Y-m-d'},
{name: 'chang_tracking_number'},
{name: 'subclass_indicator'},
{name: 'icon_file_id'},
{name: 'public_id'}
])
});
foldersDS.load();

[tryanDLS]

Isn't most of that functionality in the first tree example (Ajax + DnD)?

[robtcallahan]

Hi Ryan,

Not exactly what I'm looking for. That example has:


var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
enableDD:true,
containerScroll: true
});


So the entire tree hierarchy is loaded at once via a JSON read from get-nodes.php. I want
to be able to load only the top level first and then load subsequent folders when the user
clicks to expand. That would be a different loader for each folder.

[tryanDLS]

If you look at that example in firebug, you'll see that it's not loading the entire tree at once. Each folder click fires another request to the php page with different parms to get the children of that folder.

[black]

I think it's a very good idea.And I tried it.I found it can works on the Store's load event,
like this:
DS.on("load", test, this);
function test(){
forumDS.each(function() {
var node = new xt.AsyncTreeNode({
...
});
croot.appendChild(node);
});
//alert(DS.getCount());
}

The tree can be created.But I have a problem,how to get or access the JsonData of the DS in the "each" method.
BTW I'm sorry for that my pool English.:">

[robtcallahan]

cool.
To get at the data...

this.json.attr_name

Also, I was able to get my code to work as in the first tree example (Ajax + DnD).
I had to dig into the code to find that:
1. I needed to set baseParams to be {"user": $user} as my php needed that and
2. I needed to use the "node" POST param to obtain the "id" in my php and
3. I needed to assign my root node to '0' instead of 0.

So 1. and 2. made sense and I adjusted and got it to work.
However, 3. stumps me. Why did I have to assign a character string rather than an integer?

Rob

[black]

Thank u very much! My code is ok.
But I'm very sorry for that I cann't understand what you mean.:">