[Beta 1] Saki's FileTree for Ext 2.0

[Pachat]

From an event in a grid, is it possible to set dynamically the path and rootpath of the uploadpanel and the FileTreePanel ?
I found how to refresh the filetreepanel, but I'd like it to show specific directories only, depending on the current row of the grid.

Any hint to achieve this is Welcome!

[jsakalos]

tree.getRootNode().path = '/new/path';
tree.getRootNode().reload(); 

[martinrame]

Hi Saki, thank you for this awesome component. What I'm trying to do is to add columns to the tree, to add some information such as number of files in a folder, or file size, for example.

Can you give me some pointers?

Thank in advance.

[jsakalos]

File size is already there - in tooltip. Be in your shoes, I'd deliver the information from server and displayed in tooltip. This is unbelievably easy.

[martinrame]

Yes, I found the tooltip, but what about adding columns?

[jsakalos]

I don't use column trees at all => I don't know.

[vmorale4]

I noticed that if add a listener to the contextmenu event after the treepanel object has been created my handler is not fired. However if I add the listener in the constructor it does work. Is this intended?

For example this works:

 var treepanel = new Ext.ux.FileTreePanel({
        height: 400
        , width: 300
        , url: 'filetree.ashx'
        , id: 'ftp'
        , title: 'Share files'
        , renderTo: 'treepanel'
        , rootPath: 'root'
        , topMenu: true
            , listeners: { 'contextmenu': function() { console.log('clic'); } }
    }); 

But this doesn't:

 var treepanel = new Ext.ux.FileTreePanel({
        height: 400
        , width: 300
        , url: 'filetree.ashx'
        , id: 'ftp'
        , title: 'Share files'
        , renderTo: 'treepanel'
        , rootPath: 'root'
        , topMenu: true
    });

    treepanel.on( {'contextmenu': function() { console.log('clic'); } }); 

Am I missing something?

[jsakalos]

These should be equivalent...

[vmorale4]

These should be equivalent...

Found the problem. The built-in 'onContextMenu' handler is returning a false value after executing. If you change it to true then it works (line 1125):

 onContextMenu: function(node, e) {
        if (this.readOnly) {
            return false;
        }
        this.showContextMenu(node);

        return true;  //I changed this to true
    } // eo function onContextMenu 

I tested it in Chrome, Firefox 3, Opera, IE7 and I didn't notice any side effects of changing that value (in Windows)

[vmorale4]

What do you think of adding an 'alias' attribute for tree nodes?

In the project that I'm working some of the 'physical directory' names are different, but for usability purposes I am displaying a 'User-friendly' name.

When the FileTreePanel executes a GET cmd, the server response normally looks like this:

[{"text":"simple_folder","iconcls":"folder","disabled":false,"leaf":false}] 

However, let's say for example we have a directory in the server called 'ftrpnl' but I want my users to see 'File Tree Panel' instead. Hence the response from the server would be:

[{"text":"File Tree Panel","iconcls":"folder","disabled":false,"leaf":false, alias:'ftrpnl'}] 

To make this work I updated the getPath method so that it first looks at the alias attribute (if defined). If alias is undefined is assumed that the directory name is identical in the server.

It is a simple change, (two lines of code):

   /**
    * returns path of node (file/directory)
    * @private
    */
    , getPath: function(node) {
        var path, p, a;

        // get path for non-root node
        if (node !== this.root) {
            p = node.parentNode;
            a = [node.attributes.alias || node.text]; //changed vmorale4
            while (p && p !== this.root) {
                a.unshift(p.attributes.alias || p.text); //changed vmorale4
                p = p.parentNode;
            }
            a.unshift(this.root.attributes.path || '');
            path = a.join(this.pathSeparator);
        }

        // path for root node is it's path attribute
        else {
            path = node.attributes.path || '';
        }

        // a little bit of security: strip leading / or .
        // full path security checking has to be implemented on server
        path = path.replace(/^[\/\.]*/, '');
        return path;
    } // eo function getPath 

I called the new attribute alias, but I'm open for ideas for other name (serverName, name, link, etc..)

It would be great if you could incorporate that change