[Beta 1] Saki's FileTree for Ext 2.0

[jsakalos]

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:


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



Ext.ux.FileTreeMenu:
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

Ext.ux.FileTreePanel:
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.

Enjoy!

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.

Thanks,

[newc_k]

Very nice
But,Why is it necessary to include ext-all-debug.js?

[jsakalos]

Because "In Progress" === not finished === likely to be debugged === include debug version of Ext.

[loeppky]

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]

Yeah, I know. However, I need a bit more to it such as store for multiple files, custom fields, etc.

[loeppky]

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

[loeppky]

jsakaolos: I updated post #2 of the Ext.ux.form.BrowseButton thread with a link to a sample of BrowseButton online: http://loeppky.com/steven/code/samples/BrowseButton/. This sample displays and manages the files that were selected for upload.

[jsakalos]

Thanks, I take a deeper look as you've done great job on button look and cross-browser compatibility.

It's perfect that you've added demo, especially the demo mode as it shows ho buttons are done.

One question: If I decide to use your code in my application, what is license?

[loeppky]

jsakalos: glad you like the demo. I hadn't thought about licensing. I'll get back to you by tomorrow. Obviously, I'm not trying to do any of this for profit, so what would you recommend?

[jsakalos]

Originally Posted by loeppky

jsakalos: glad you like the demo. I hadn't thought about licensing. I'll get back to you by tomorrow. Obviously, I'm not trying to do any of this for profit, so what would you recommend?

Ext is licensed under LGPL what very shortly means:

* Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html

If somebody cannot or does not want to be bound by LGPL he can buy a commercial license. I'd say this is workable setup, however, final decision is yours.

BTW, I'm going to use your BrowseButton for my upcoming UploadPanel and FileTree. I works very well so far, you've done great job!