Ext.ux.FileTreePanel for Ext 2.0

March 17, 2008 | ReyBango

Ext Core Team member Jozef Sakalos has a great reputation in the community for building exciting extensions to the Ext framework. His latest creation doesn't disappoint and continues along his well-known path of building extensions that just make sense.

Ext.ux.FileTreePanel

Allowing users to manage files remotely is a very common use case providing tremendous flexibility for applications that need to handle various files such as images, word processing documents, or spreadsheets. Ext.ux.FileTreePanel is a widget which can be used within Ext to provide easy file management of a directory structures stored on a server. Leveraging the ubiquitous tree metaphor, the component makes it easy for users to understand how directories are structured and which files are included within a tree node.

Saki added a tremendous amount of functionality allowing:

Files to be dragged and dropped to different folders
Renaming of files and folders
Deletion of files and folders
Creation of new folders
Uploading of multiple files
Opening files
Download of files

How It Was Built

Taking a very modular approach, Saki built the FileTreePanel component using 5 independent classes, each of which is usable outside of the FileTreePanel component: Ext.ux.FileUploader:
This class is responsible for file uploads and has no UI. It has to have configured a store with some mandatory and some optional fields that contains mainly references to file input elements that hold file names to upload. It feature two modes of upload. Single upload mode takes all inputs from store, creates one form, appends inputs to it and uploads files in one single request. Multiple upload mode creates one form for one input and uploads each file in its own request. Other features:

extends Ext.util.Observable
start/stop all or individual uploads
set path to upload to
full set of events, both for individual files and whole upload
upload progress support (not working for more than one file with PHP uploadprogress backend)
client/server communication specification is same as for my Ext 1.x version

Ext.ux.UploadPanel: Provides user interface to the above uploader with a couple of buttons, DataView to display the upload queue and status of files and mainly the store used by both DataView and FileUploader. UploadPanel was designed to fit to a menu therefore it is small and narrow by design. Other features:

extends Ext.Panel
add files to queue, queue display
remove files from queue one-by-one or all at once
UI to stop whole upload or individual files
icons for many file types
icons for status of files

Ext.ux.FileTreeMenu: The (context) menu for FileTreePanel that contains UploadPanel for file uploads and other items for basic file operations such as:

various open modes
create folder
rename file/folder
delete file/folder
upload file
reload/expand/collapse of tree nodes

Ext.ux.FileTreePanel:
The server file tree UI that integrates everything together. Features:

extends Ext.tree.TreePanel
file type icons for many file types
inline editing of file/folder names
drag & drop operations
context sensitive context menu
optional top toolbar in addition to context menu (especially good for Opera users)

Saki also used the Ext.ux.BrowseButton by loeppky because "it is good and working and because loeppky promised support and debugging if necessary".

Suggestions for Saki and Contributing to the Code

Saki has posted about FileTreePanel on the Ext forums and this is the best place to ask him questions about his new extension and even contribute to future enhancements. The extension is currently in a beta phase but Saki has mentioned that the code is very stable and usable. Saki is one of many contributers to the Ext Community Forums which are both helpful and excellent contributors to the community. The User Extensions and Plugins section is constantly updated with new and exciting extensions for every type of functionality imaginable.

There are 14 responses. Add yours.

flexibility

4 years ago

[...] reports of a crackdown and arrests ordered by Chinese authorities in thetricycleblog.wordpress.comExt.ux.FileTreePanel for Ext 2.0Allowing users to manage files remotely is a very common use case providing tremendous flexibility [...]

Lucian

Great job, Saki!...very helpful, as always…;)

XLsuite

That’s AWSOME!!!

czarft

helpful Thank you

DEkart

Very interesting component. Can we use it within AIR applications for managing local files?

Abdel

This is Great! Thanks Saki!

jsakalos

@DEkart

I haven’t tested is with AIR. The main reason is that I run Linux and Adobe has not yet released Linux version of AIR. Could you please test it? I, and most likely many other users, would like to hear, hopefully good news, on the matter.

JasonOng

Awesome! Can’t wait to use it!

Scott Fitchet

I was having trouble finding a demo and the extjs.eu site is down. Anyone got a link to check out the new version?

Link is up again - it was provider’s outage for a couple of hours

Here’s the link: http://filetree.extjs.eu

Looks nice.

wangjianbo

hi Saki
can you give me a demo of this Ext.ux.FileTreePanel,or a liveDemo address! i am a new Exter
thanks

http://filetree.extjs.eu

oops (sorry about the double post)

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.

Blog