Ext.ux.UploadDialog 控件使用说明及在Ext 3.x下问题解决
2011-10-27 16:21
323 查看
[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对象,如下:
在Server端处理上传文件相应代码中(不管你使用何种Web语言),在处理用户提交上传表单后,必须对外输出以下JSON字符串:
在.net项目中可以用context.Response.Write("{success:true,message:'上传文件数据成功!'}");进行输出。
更详细的使用方法请参考该控件出处: http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php
二. 调用问题及处理方法:
由于该控件是基于Ext Js 2.x版本产生的,当Ext Js升级为3.x及以上版本时会出现'x_buttons.upload.getEl()' 为空或不是对象等问题。
这是由于Ext 3.x版本中的Ext.Button 模板被改变,如下:
这就造成了该控件源码中this.el.child(".x-btn-center");无法取得该对象,所以要修改为this.el.child(".x-btn-mc");
在对源代码进行一系列修改后,本控件可以在Ext 3.x下成功使用。
对于解决本问题详细说明请参考: /article/4208564.html 文章
三. 关于该控件的不足及扩展:
本控件特点是能够上传多文件,并显示上传进度。这种上传方式的确让用户在上传过程中有比较舒适的交互体验。
可是,本控件实质上并没有反应出上传的多文件中某一个具体文件的进度,也就是说,当用户上传的文件列表中存在有大文件时,该控件进度条会一直停留在这个大文件的上传的开始点,并不会反应该文件的实时上传进度。
如果想解决这个问题,则必须从服务器端程序入手,服务器端程序必须在上传的过程中,支持对外输出本次上传的进度信息,客户端在后台异步请求该进度信息的路径,请求后再显示在该控件上。
所以,如果想完全的显示每个子文件的进度信息,除了要修改或扩展[Ext.ux.UploadDialog]代码外,还需要服务器端上传代码中对外输出指定文件的上传进度信息,从而在控件中显示。
属性配置参考
Ext.ux.UploadDialog.Dialog = function(config)
{
var default_config = {
border: false,
width: 450,
height: 300,
minWidth: 450,
minHeight: 300,
plain: true,
constrainHeader: true,
draggable: true,
closable: true,
maximizable: false,
minimizable: false,
resizable: true,
autoDestroy: true,
closeAction: 'hide',
title: this.i18n.title,
cls: 'ext-ux-uploaddialog-dialog',
// --------
url: '',
base_params: {},
permitted_extensions: [],
reset_on_hide: true,
allow_close_on_upload: false,
upload_autostart: false,
post_var_name: 'file'
四.相关下载:
1. Ext.ux.UploadDialog 原始版(基于 Ext 2.x 版本)
[下载]
2. Ext.ux.UplaodDialog 改进版(基于 Ext 3.x 版本,修正错误,增加中文信息,带调用示例) [下载]
3. Ext.ux.UploadDialog 原始参考说明 http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php
一. 控件说明:
该控件由以下几个对象组成:
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 = new Ext.ux.UploadDialog.Dialog({ 2 url: 'upload-dialog-request.php', 3 reset_on_hide: false, 4 allow_close_on_upload: true, 5 upload_autostart: true 6 }); 7 ... 8 dialog.show('show-button');
在Server端处理上传文件相应代码中(不管你使用何种Web语言),在处理用户提交上传表单后,必须对外输出以下JSON字符串:
{ success: true, // 可以为true或false. 上传成功则返回true. error: '上传文件数据成功!' // 该信息将在GRID中每行的备注列中被显示 }
在.net项目中可以用context.Response.Write("{success:true,message:'上传文件数据成功!'}");进行输出。
更详细的使用方法请参考该控件出处: http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php
二. 调用问题及处理方法:
由于该控件是基于Ext Js 2.x版本产生的,当Ext Js升级为3.x及以上版本时会出现'x_buttons.upload.getEl()' 为空或不是对象等问题。
这是由于Ext 3.x版本中的Ext.Button 模板被改变,如下:
Ext.Button.buttonTemplate = new Ext.Template( '<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">', '<tr><td class="x-btn-tl"><i> </i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i> </i></td></tr>', '<tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td><td class="x-btn-mr"><i> </i></td></tr>', '<tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i> </i></td></tr>', '</tbody></table>');
这就造成了该控件源码中this.el.child(".x-btn-center");无法取得该对象,所以要修改为this.el.child(".x-btn-mc");
在对源代码进行一系列修改后,本控件可以在Ext 3.x下成功使用。
对于解决本问题详细说明请参考: /article/4208564.html 文章
三. 关于该控件的不足及扩展:
本控件特点是能够上传多文件,并显示上传进度。这种上传方式的确让用户在上传过程中有比较舒适的交互体验。
可是,本控件实质上并没有反应出上传的多文件中某一个具体文件的进度,也就是说,当用户上传的文件列表中存在有大文件时,该控件进度条会一直停留在这个大文件的上传的开始点,并不会反应该文件的实时上传进度。
如果想解决这个问题,则必须从服务器端程序入手,服务器端程序必须在上传的过程中,支持对外输出本次上传的进度信息,客户端在后台异步请求该进度信息的路径,请求后再显示在该控件上。
所以,如果想完全的显示每个子文件的进度信息,除了要修改或扩展[Ext.ux.UploadDialog]代码外,还需要服务器端上传代码中对外输出指定文件的上传进度信息,从而在控件中显示。
属性配置参考
Ext.ux.UploadDialog.Dialog = function(config)
{
var default_config = {
border: false,
width: 450,
height: 300,
minWidth: 450,
minHeight: 300,
plain: true,
constrainHeader: true,
draggable: true,
closable: true,
maximizable: false,
minimizable: false,
resizable: true,
autoDestroy: true,
closeAction: 'hide',
title: this.i18n.title,
cls: 'ext-ux-uploaddialog-dialog',
// --------
url: '',
base_params: {},
permitted_extensions: [],
reset_on_hide: true,
allow_close_on_upload: false,
upload_autostart: false,
post_var_name: 'file'
四.相关下载:
1. Ext.ux.UploadDialog 原始版(基于 Ext 2.x 版本)
[下载]
2. Ext.ux.UplaodDialog 改进版(基于 Ext 3.x 版本,修正错误,增加中文信息,带调用示例) [下载]
3. Ext.ux.UploadDialog 原始参考说明 http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php
相关文章推荐
- 【原创】[Ext.ux.UploadDialog] 控件使用说明及在Ext 3.x下问题解决
- ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题
- ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题
- Java Web中使用JSPSmartUpload控件实现文件的上传和下载(解决了中文乱码问题)(JSP页面采用GBK编码)
- 解决使用ajaxFileUpload上传控件出现的问题:回调函数总是进入error或success
- 在bootstrap modal dialog中使用webupload,打不开对话框问题解决
- Java Web中使用JSPSmartUpload控件实现文件的上传和下载(解决了中文乱码问题)(JSP页面采用GBK编码)
- Ext.ux.UploadDialog 中底部工具条BottomToolbar 不显示的问题
- 解决Android使用ActivityGroup打开Activity后控件无法居中问题
- 解决Android使用ActivityGroup打开Activity后控件无法居中问题
- 解决使用 Theme.AppCompat.XX 主题控件默认带阴影的问题
- 对于目前用户使用PTAEXT.dll控件引起浏览器崩溃问题!
- jquery UI Datepicker时间控件的使用及问题解决
- 使用jspsmartupload解决enctype引起的无法同时上传文件和接值的问题
- WdatePicker日期选择控件使用时,Internet Explorer无法打开站点,已终止操作”问题的解决
- Extjs 解决MVC中 Ext.ux.SearchField 的问题
- 解决 CefSharp WPF控件不能使用输入法输入中文的问题(代码已提交到 github)
- file文件添加change事件,结合ajaxFileUpload使用文件上传只生效一次问题解决
- 解决VB.net使用COM控件加载Excel文件速度慢的问题
- 使用WebBrowser控件播放Flash网页相关问题解决方法