Ext.ux.FileBrowserPanel

[bruijn88]

Hi all!

After playing around with Ext for a while I finally got around making my first extension.
As of now, it reached a working 0.1 version with all features I thought were necessary for it to be useful.

It's (how surprisingly) a file browser! It extends Ext.Panel which uses a borderlayout. The west region holds a tree displaying the folders, and the center region holds a grid displaying the files in the currently selected folder.
It support basic operations, naming create/delete/rename folders and delete/rename/move/download files.

It comes with a sample PHP backend to provide some out of the box functionality but keep in mind that was only written to work, not to be safe. So don't use in production.

The zip contains one folder. Copy ExtJS into it and assure that all url's are correct. Navigate to it and things should be working on a PHP server.
There is another folder named 'docs' containing an html file with (guess what) documentation.

Since i've been too lazy to write a secure backend, I can't provide a live demo, but below you'll find 2 screenshots showing the UI.

I'm really curious what you guys think about it, and I appreciate all feedback!

Project Home (http://code.google.com/p/ext-ux-filebrowserpanel/)

Happy filebrowsing!
Zogs.


http://i879.photobucket.com/albums/ab353/bruijn88/th_screenshot-grid.png (http://s879.photobucket.com/albums/ab353/bruijn88/?action=view&current=screenshot-grid.png)http://i879.photobucket.com/albums/ab353/bruijn88/th_screenshot-thumbnails.png (http://s879.photobucket.com/albums/ab353/bruijn88/?action=view&current=screenshot-thumbnails.png)


Update:

Fixed some bugs + maintenance.
Project now hosted at google code.

Update 04-Nov-2009:
- You can now configure a different URL for each action performed on the server
- If, when creating/ renaming files/folder, then name has changed on the server due to eg. filtering
you send an extra parameter in the response with the new name which is then reflected in the UI
- refreshGrid() nog uses reload() on the store
- Docs updated accordingly

Please let me know if you run into any troubles, or create an issue on the project page.

[cherbert]

This is fantastic! Good work!

I'll check it out later.

[cleannoise]

It's good work./:)

I'll use this plugin in my work, when I write uploading function.

[zihotki]

Thanks, looks very interesting.
Do you mind if I port it to .Net (ASP.NET MVC)?

[bruijn88]

@zihotki
No, not at all. please go ahead and do wtf (http://sam.zoy.org/wtfpl/COPYING) you want.. ;)
Also, please let me know what you think of it.

Zogs.

[rusty124]

Tested in IE7 and FF3.
Noticed the file list grid does not allow you to scroll...

[bruijn88]

@rusty

Thanks for pointing out!
Fixed and updated download.

Zogs.

[rusty124]

Thanks for updating.. I tried to download it again but the link does not work...

[bruijn88]

@rusty
It doesn't?
With the update I also changed some of the sample files so it wouldn't exceed the max file size of this forum.
It's odd, because the link works here. Did the previous one work for you? If so, i can provide a link to the old location (with the fixed version of course).

Zogs.

[rusty124]

Strange, when I click on your download link in the first post I get:

"Invalid Attachment specified. If you followed a valid link, please notify the administrator (http://extjs.com/forum/sendmessage.php)"

That is the link I used the first time I downloaded it...

[bruijn88]

@rusty

I changed to link back to it's old location.
Can you try again?

Zogs.

[rusty124]

OK, I was able to download it.

Thanks!

[bruijn88]

@rusty

Cheers! and let me know what you think!

Zogs.

[cherbert]

This doesn't seem to be working in 3.0.2. Is anyone else using it that knows how to fix it? I can't seem to figure out where the problem is.

Error Console reports...

Error: Ext.fly(node.ui.wrap) is null
Source File: ext-3.0.2/ext-all-debug.js
Line: 46426



Update

I have managed to get it working by changing lines 103-106 in Ext.ux.FileBrowserPanel.js from...



render: {
fn: this.onTreeRender,
scope: this
}


to



afterrender: {
fn: this.onTreeRender,
scope: this
}


However, another problem seems to be happening that I simply cannot understand why. The following code is strangely always getting the path of the previous node I had selected rather than the current node. Its always a selection behind. This worked in 3.0 but now seems to be behaving very oddly in 3.0.2.



onGridStoreBeforeLoad: function(store, opts) {

store.baseParams.action = 'get-files';

store.baseParams.path = this.tree.getSelectionModel().getSelectedNode().getPath('text');

}


Any help would be gratefully received.