View Full Version : Ext.ux.FileBrowserPanel

7 Jul 2009, 6:49 AM
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!

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)


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.

7 Jul 2009, 8:43 AM
This is fantastic! Good work!

I'll check it out later.

10 Jul 2009, 4:06 AM
It's good work./:)

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

11 Aug 2009, 10:17 AM
Thanks, looks very interesting.
Do you mind if I port it to .Net (ASP.NET MVC)?

12 Aug 2009, 8:47 AM
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.


14 Aug 2009, 8:08 AM
Tested in IE7 and FF3.
Noticed the file list grid does not allow you to scroll...

14 Aug 2009, 8:51 AM

Thanks for pointing out!
Fixed and updated download.


14 Aug 2009, 9:25 AM
Thanks for updating.. I tried to download it again but the link does not work...

14 Aug 2009, 9:35 AM
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).


14 Aug 2009, 9:39 AM
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...

14 Aug 2009, 9:48 AM

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


14 Aug 2009, 9:52 AM
OK, I was able to download it.


14 Aug 2009, 10:07 AM

Cheers! and let me know what you think!


15 Oct 2009, 5:02 AM
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


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

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


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.

22 Mar 2013, 8:20 AM
Hi, good job, but is there something similar for Extjs 4.x? or how can i adapt this for Extjs 4.x? Tnx.