[Beta 1] Saki's FileTree for Ext 2.0

[rtrocc]

this is the head of my html file:

<link rel="stylesheet" type="text/css" href="extensions/fileuploader/css/Ext.ux.IconCombo.css">
        <link rel="stylesheet" type="text/css" href="extensions/fileuploader/css/icons.css">
        <link rel="stylesheet" type="text/css" href="extensions/fileuploader/css/webpage.css">
        <link rel="stylesheet" type="text/css" href="extensions/fileuploader/css/filetree.css">
        <link rel="stylesheet" type="text/css" href="extensions/fileuploader/css/filetype.css">
        <link rel="stylesheet" type="text/css" href="extensions/fileuploader/css/famflag.css">
        <link rel="stylesheet" type="text/css" href="extensions/fileuploader/css/Ext.ux.IconCombo.css">
        <link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css">   
        <link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/xtheme-gray.css">
      
        <script type="text/javascript" src="ext-2.1/adapter/ext/ext-base.js"></script>       
        <script type="text/javascript" src="ext-2.1/ext-all.js"></script>
        <script type="text/javascript" src="extensions/fileuploader/js/Ext.ux.WebPage.js"></script>
        <script type="text/javascript" src="extensions/fileuploader/js/Ext.ux.form.BrowseButton.js"></script>
        <script type="text/javascript" src="extensions/fileuploader/js/Ext.ux.FileUploader.js"></script>
        <script type="text/javascript" src="extensions/fileuploader/js/Ext.ux.UploadPanel.js"></script>
        <script type="text/javascript" src="extensions/fileuploader/js/Ext.ux.ThemeCombo.js"></script>
        <script type="text/javascript" src="extensions/fileuploader/js/Ext.ux.IconCombo.js"></script>
        <script type="text/javascript" src="extensions/fileuploader/js/Ext.ux.LangSelectCombo.js"></script>
        <script type="text/javascript" src="extensions/fileuploader/local/en_US.js"></script>

this is how my panel config looks :

                            var uploadPanel = new Ext.ux.UploadPanel({
                                title: 'Upload files',
                                xtype:'uploadpanel',
                                buttonsAt:'tbar',
                                id:'uppanel',
                                url:'ajax.php',
                                path:'root',
                                maxFileSize:1048576,
                                enableProgress:false
                            });
                            
                            var uploadTabPanel= new Ext.TabPanel({
                                activeTab: 0,
                                border: false,
                                frame: true,
                                items: [uploadPanel]    
                            });
                            
                            var uploadWin = new Ext.Window({
                                width:300,
                                //minWidth:165,
                                id:'winid',
                                height:400,
                                //minHeight:200,
                                layout:'fit',
                                border:false,
                                closable:true,
                                //closeAction: 'hide',
                                title:'Window Title',
                                iconCls:'window_icon',
                                items:[uploadTabPanel]
                             });

and I in my Ext.ux.UploadPanel.js file I configured the busy icon class as follows:

/**
     * @cfg {String} workingIconCls iconClass to use for busy indicator
     */
    ,workingIconCls:'icon_waiting_ajax'

    // }}}

The above 'icon_waiting_ajax' class works when applied to other iconCls configs, and never seems to attempt to get loaded when a file is uploaded...

[jsakalos]

I found it. The mandatory class names for state icons are: ux-up-icon-{state}. States are done, failed, uploading, stopped, queued. These are used in template for DataView. If you want another icon, keep css class name and replace only url of the image.

[rtrocc]

I found it. The mandatory class names for state icons are: ux-up-icon-{state}. States are done, failed, uploading, stopped, queued. These are used in template for DataView. If you want another icon, keep css class name and replace only url of the image.

You are the man Saki! Thanks so much for looking further into it for me, as I had left it aside and continued on the rest of my project planning to go back to it at the end.

So it seems that regardless the class name setting in the uploadPanel.js config, the default state class will be used as defined in the template like you said:

from UploadPanel.js

// create view
Ext.apply(this, {
items:[{
xtype:'dataview'
,itemSelector:'div.ux-up-item'
,store:this.store
,selectedClass:this.selectedClass
,singleSelect:true
,emptyText:this.emptyText
,tpl: this.tpl || new Ext.XTemplate(
'<tpl for=".">'
+ '<div class="ux-up-item">'
// + '<div class="ux-up-indicator"> </div>'
+ '<div class="ux-up-icon-file {fileCls}"> </div>'
+ '<div class="ux-up-text x-unselectable" qtip="{fileName}">{shortName}</div>'
+ '<div id="remove-{[values.input.id]}" class="ux-up-icon-state ux-up-icon-{state}"'
+ 'qtip="{[this.scope.getQtip(values)]}"> </div>'
+ '</div>'
+ '</tpl>'

Thanks again for your help.

Now my other problem was getting IE7 to not attempt to open the file Im uploading to. I think it might have to do with the proper response header. I also remember seeing someone else having the same issue but can't seem to track down the post I read..

-Ralph

[jsakalos]

That config option is a relict of some stage of devel - it will be removed in final version.

Your current problem is the server-side problem. Look at that direction..

[rtrocc]

Ok, according to your instructions on supplying the correct JSON response from the server, I was setting the http response header like so:

header('Content-Type: text/html, charset=utf-8'); 

I just removed that line from my server script and it works fine...

Should it not have been there in the first place?

[hsurya]

I used to use classic ASP, with zero knowledge of PHP. So for a week I tried to make my own ASP back-end, and finally I got it.

For those who is like me, only know classic ASP, I will share the work with a little donation. You then may ask through email further, and I will try to answer as long as I can, with the knowledge that brought me to make the FileTreePanel works. But I do not guarantee that the things may work on your server as it does on mine. So far it works well at least on IIS 5.1 Windows XP.

The differences with Saki's example is that we can choose in which directory we want to upload using the UploadPanel.

I will include on the script also the Ext JS tree working example using ASP generated JSON, i.e. two-trees and reorder examples.

Sorry for everybody, especially Saki, that I wish some donation for sharing the ASP script. I am a poor student and I must do part-time work at the same time to cover my study expense. If you are not pleased or if this infringes the license, then I will remove this posting.

See demo: http://hsurya.brinkster.net/filetree/filetree.asp

Snapshot:

[jsakalos]

No problem with asking for donation; I use the same for PHP backend.

Good luck!

[hsurya]

No problem with asking for donation; I use the same for PHP backend.

Good luck!

Thank you, Saki.. you are great!

[calicoder]

I'm trying to hook this up to a servlet. I walked through the code and all looks well until I hit

line 5222 in ext-all-debug.js

form.submit();

On this line I get a dialog box from FF that asks if I'd like to save the file or open... behavior that is invoked when downloading files.

I can't step into this call since the function part of the native JS libraries. Any help would be much appreciated

Here is my client code

new Ext.Panel({ 
                        width:180
                        ,minWidth:165
                        ,id:'winid'
                        ,minHeigth:250
                        ,height:250
                        ,layout:'fit'
                        ,title:'UploadPanel'
                        ,iconCls:'icon-upload',
                        bodyStyle:'backgroundColor:#ffffff',
                        border:false,
                        items:[{
                              xtype:'uploadpanel'
                             ,buttonsAt:'tbar'
                             ,id:'uppanel'
                             ,url: 'admin?action=save-image'
                             ,path:'root'
                             ,maxFileSize:1048576  // 10 MB
                        }]
})

[calicoder]

FIXED my problem... classic contentType problem. I should've known