PDA

View Full Version : Ext.ux.FileBrowserPanel



bruijn88
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!
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
7 Jul 2009, 8:43 AM
This is fantastic! Good work!

I'll check it out later.

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

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

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

bruijn88
12 Aug 2009, 8:47 AM
@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
14 Aug 2009, 8:08 AM
Tested in IE7 and FF3.
Noticed the file list grid does not allow you to scroll...

bruijn88
14 Aug 2009, 8:51 AM
@rusty

Thanks for pointing out!
Fixed and updated download.

Zogs.

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

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

bruijn88
14 Aug 2009, 9:48 AM
@rusty

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

Zogs.

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

Thanks!

bruijn88
14 Aug 2009, 10:07 AM
@rusty

Cheers! and let me know what you think!

Zogs.

cherbert
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



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.

icebergdelphi
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.