Hi all,

this is my first beta release of FileTreePanel for Ext 2.x. Despite it looks very similar if not identical to Ext 1.x implementation, it is different, more structured and offers more (or different) configuration options which deserves an explanation.

The whole toy consists of 5 relatively independent classes that can be used also outside of FileTreePanel component. Starting from bottom up, they are:

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
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.BrowseButton by loeppky:
This class was not written by me, I just used it because it is good and working and because loeppky promised support and debugging if necessary.

It is (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
This server file tree UI that integrates all things 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)
Overall status:
The code, though beta, is in very good condition, it is fully documented and commented and jslinted. Of course, I haven't had enough time to test everything so some bugs can pop up. I'm counting with your interest, support and bug reporting to help me to find and fix them. As majority of you perhaps already know, I'm not neither interested nor skilled enough to find IE bugs and workarounds for them, however, if you find IE specific bugs and workarounds for them, I will include them in the main code if they will be enclosed in Ext.isIE conditional blocks.

Features planned for 1.0 release are all implemented except the progress information I'm not quite sure about. The problem is mainly on server side so if some of you know how to implement better progress information for Apache/PHP@Linux I'll be only glad to hear from you.

The whole FileTreePanel package is now downloadable in 3 compressed formats: bz2, tar.gz and zip. Server side scripts, as for 1.x version, are not included in packages. You can write your own per specification I've published or you can contact me via PM or skype.


Note: You may need to adjust paths in filetree.css if your icons do not show correctly.

-------------- original post bellow -------------
Hi all.

I've reached one step in porting my FileTree to Ext 2.0, minor but important one, and that is Ext.ux.form.FileField form field.

This will become part of UploadForm (or something similar) and UploadForm will become part of FileTree.

Take a look at it here and let me know what do you think.