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:
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:
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
reload/expand/collapse of tree nodes
This server file tree UI that integrates all things together. Features:
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)
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 -------------
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.
jsakalos: with MaximGB's ideas/help, I have implemented a Ext.ux.form.BrowseButton extension for doing the CSS hackery of placing an input file element over an Ext.Button. It works with all the Windows browsers (IE6/7, FF2, Safari 3). I don't have a Mac to test with unfortunately. It covers almost the entirety of the Ext.Button and it prevents the input file from overlapping other buttons. I think you could integrate it very easily into your Ext.ux.form.FileField.
Actually, MaximGB and I were just recently in discussion about using creating a Ext.ux.form.BrowseField that would use Ext.ux.form.BrowseButton, but it looks like that's unnecessary now
jsakalos: in your Ext.ux.form.FormField class, you can call detachInputFile method on the Ext.ux.form.BrowseButton to get the inputFileEl. Your Ext.ux.form.FormField class would then manage these file input elements and take care of displaying them to a user in your stylized way. detachInputFile will by default create a new inputFileEl to mask the BrowseButton as soon as the previous one is "detached".
Does this help your use case? Or maybe there's something I'm not understanding...