Sencha Inc. | HTML5 Apps

Blog

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

7 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

7 years ago

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

XLsuite

7 years ago

That’s AWSOME!!!

czarft

7 years ago

helpful Thank you

DEkart

7 years ago

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

Abdel

7 years ago

This is Great! Thanks Saki!

jsakalos

7 years ago

@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

7 years ago

Awesome! Can’t wait to use it!

Scott Fitchet

7 years ago

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

jsakalos

7 years ago

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

Scott Fitchet

7 years ago

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

Looks nice.

wangjianbo

7 years ago

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

Scott Fitchet

7 years ago

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.