ext中引用ux_【原创】[Ext.ux.UploadDialog] 控件使用说明及在Ext 3.x下问题解决

[Ext.ux.UploadDialog]是基于ExtJS2.0开发的文件上传控件。

一. 控件说明:

该控件由以下几个对象组成：

Ext.ux.Utils.EventQueue: 通用事件处理器，对象内置一个事件队列，调用其process函数即可对队列中待处理事件进行响应处理。控件内部将上传文件过程定义成事件数组，从而在上传过程中特定的阶段触发某事件进入下一步的处理。该对象即完成针对上传过程的特定阶段中，响应事件及执行该事件所关联函数。

Ext.ux.Utils.FSA: 针对上传过程特定的事件处理器，由Ext.ux.Utils.EventQueue派生。

Ext.ux.UploadDialog.BrowseButton: 打开文件按钮控件基类。

Ext.ux.UploadDialog.TBBrowseButton:  打开文件按钮控件扩展类。本控件中的的“添加”按钮就是该对象实例。

Ext.ux.UploadDialog.Dialog: 上传控件对话框对象，及本控件的主对象。该对象由Ext.Window派生。

使用该控件时，我们只需要调用Ext.ux.UploadDialog.Dialog对象，如下：

1 dialog=newExt.ux.UploadDialog.Dialog({2 url:'upload-dialog-request.php',3 reset_on_hide:false,4 allow_close_on_upload:true,5 upload_autostart:true6 });7 ...8 dialog.show('show-button');

在Server端处理上传文件相应代码中(不管你使用何种Web语言)，在处理用户提交上传表单后，必须对外输出以下JSON字符串:

{

success:true,//可以为true或false. 上传成功则返回true.error:'上传文件数据成功!'//该信息将在GRID中每行的备注列中被显示}

在.net项目中可以用context.Response.Write("{success:true,message:'上传文件数据成功!'}");进行输出。

二. 调用问题及处理方法:

由于该控件是基于Ext Js 2.x版本产生的，当Ext Js升级为3.x及以上版本时会出现'x_buttons.upload.getEl()' 为空或不是对象等问题。

这是由于Ext 3.x版本中的Ext.Button 模板被改变，如下：

Ext.Button.buttonTemplate=newExt.Template('

这就造成了该控件源码中this.el.child(".x-btn-center");无法取得该对象，所以要修改为this.el.child(".x-btn-mc");

在对源代码进行一系列修改后，本控件可以在Ext 3.x下成功使用。

三. 关于该控件的不足及扩展:

本控件特点是能够上传多文件，并显示上传进度。这种上传方式的确让用户在上传过程中有比较舒适的交互体验。

可是，本控件实质上并没有反应出上传的多文件中某一个具体文件的进度，也就是说，当用户上传的文件列表中存在有大文件时，该控件进度条会一直停留在这个大文件的上传的开始点，并不会反应该文件的实时上传进度。

如果想解决这个问题，则必须从服务器端程序入手，服务器端程序必须在上传的过程中，支持对外输出本次上传的进度信息，客户端在后台异步请求该进度信息的路径，请求后再显示在该控件上。

所以，如果想完全的显示每个子文件的进度信息，除了要修改或扩展[Ext.ux.UploadDialog]代码外，还需要服务器端上传代码中对外输出指定文件的上传进度信息，从而在控件中显示。

四.相关下载：1. Ext.ux.UploadDialog 原始版(基于 Ext 2.x 版本) [下载]

2. Ext.ux.UplaodDialog 改进版(基于 Ext 3.x 版本,修正错误,增加中文信息,带调用示例)  [下载]