PDA

View Full Version : JSON question



sferreira
12 Apr 2011, 6:44 AM
Hello all,

I don't know if I am posting this question in the correct forum, so if I am I apologize for that. I am a newbie in ExtJS and I am trying to write a JSON file to be loaded to a tree loader and I have been successful so far. I created some dummy nodes in my tree and it all worked fine.

But now I want my JSON file to "map" a set of folders and the files within them. My idea is to have a tree that shows the folders and their files. These folders and files are on my web server, so I don't mean to get them locally.

So does anyone have any ideas how can a JSON file "shadow" a set of folders and their files and put them in the right format so that that information can be loaded to a tree loader?

Thanks in advance! :)

Hook
12 Apr 2011, 8:36 AM
This is an awfully broad quertion. What is your server-side technology? PHP? Java? Grails?

--
JR

sferreira
12 Apr 2011, 8:46 AM
I'm pending between Java or PHP, I still haven't decided yet. I was hoping that I could understand how to do this or what approach should I use so I can decide which technology to use.

I am sorry, I'm a newbie in this so I didn't realize how broad was my doubt! :)

Screamy
12 Apr 2011, 8:47 AM
Keep in mind that the TreePanel just loads a big, dumb hunk of JSON (in a particular format). How you construct the JSON and what it represents is all up to the serverside of things. So no, there is no easy/automated 'shadowing' of a file system by the TreePanel component.

I implemented a serverside file manager using an Ext TreePanel, and it required a lot of effort:



I had to to create a server side object which encapsulates the data required to build a TreeNode, including the ability to store a child collection of nodes. Each TreeNode object should also have some kinds of 'metadata' attribute where you can store the actual fully qualified path of the file on the server, where this attribute gets streamed along with the rest of the JSON data.
I had to create a self-recursive serverside method, which given a specified starting File/folder and starting TreeNode, will call itself recursively and build a tree-like collection of files/folders and stream the results to the client as JSON.
I had to implement file/folder creation/editing/deletion action on the server side and expose them on the client side.
I had to implement file uploads, so a user can add files to a desired folder.
I had to implement a maximum file size restriction for uploads, on the server side.
I had to perform strict checking of any file/path Strings sent by the client, to make sure someone isn't trying do relative-path hacking to expose undesired serverside resources.
etc, etc...

sferreira
12 Apr 2011, 8:57 AM
Thank you for your answer Screamy!

I did realize that doing something like this would require a lot of work. I actually don't need the client side to upload anything, the idea is to store a bunch of test scripts in the server and allow the client to execute them. There is also the execution part of this, which I forgot to mention. The client needs to able to execute the content of the scripts that have been retrieved from the server... :s

Screamy
12 Apr 2011, 9:17 AM
The execution part is fairly easy, where triggering a download of the file will give them a run/save option (depending on the browser used) . Here's how you can pass a selected tree node to an openFile() method which invokes the run/save action:




function openFile(node)
{
if (node == null)
{
Ext.Msg.show({
bodyStyle: 'padding: 5px;',
title: "No Selection",
msg: 'Please select a file to be opened.',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK,
width: 300
});
return;
}

// if node is a folder, bypass it.
if (!node.attributes.leaf) {
return;
}

try {
Ext.destroy(Ext.get('downloadIframe'));
}
catch(e) {
// whacha gonna do?
}

Ext.DomHelper.append(document.body, {
tag: 'iframe',
id:'downloadIframe',
frameBorder: 0,
width: 0,
height: 0,
css: 'display:none;visibility:hidden;height:0px;',
src: 'file/download.action?targetFile=' + node.attributes.meta
});
}
Note that I used a custom 'meta' property on each Tree node to store the actual serverside path of the target file.

stephen.friedrich
12 Apr 2011, 9:19 AM
Also see this thread: http://www.sencha.com/forum/showthread.php?29090-Beta-1-Saki-s-FileTree-for-Ext-2.0
It is for Ext 2 and does much more than you need, but the principles still apply.

sferreira
13 Apr 2011, 1:11 AM
Thank you all for your answers, I will try to implement both your suggestions. :)

Thanks! =D>