Ext.ux.UploadDialog 像ext一样展现给用户震撼的界面:
如图:上传之前
上传过程中:
强悍吧。怎样使用呢。?
自己去搜索 Ext.ux.UploadDialog.包下载
使用是出来导入必要的ext包还需要
<link rel="stylesheet" href="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="Ext.ux.UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
使用很简单 弄个onclick事件 核心代码如下
-
functioninsertImages()
- {
-
dialog=newExt.ux.UploadDialog.Dialog({
-
title:'文件上传__上传过程中关闭窗口,不影响上传_wayfoon',
-
url:wayfoon.MMS.DataPage+'/xxx.action?action=xxx',
- width:450,
- height:300,
- minWidth:450,
- minHeight:300,
-
draggable:true,
-
resizable:true,
-
-
constraintoviewport:true,
-
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','bmp','BMP'],
-
modal:true,
-
-
reset_on_hide:false,
-
allow_close_on_upload:true,
-
upload_autostart:false
- });
-
dialog.show();
-
dialog.on('uploadsuccess',onUploadSuccess);
-
- }
提交时,默认提交的文件名是file 你可以修改 post_var_name: 'myfile',
dialog 有很多事件,如下英文。例子中使用了uploadsuccess事件
-
filetest - fires before file is added into the queue, parameters:
dialog - reference to dialog
filename - file name
If handler returns false then file will not be queued.
-
fileadd - fires when file is added into the queue, parameters:
dialog - reference to dialog
filename - file name
-
fileremove - fires when file is removed from the queue, parameters:
dialog - reference to dialog
filename - file name
record - file record
-
resetqueue - fires when upload queue is resetted, parameters:
dialog - reference to dialog
-
beforefileuploadstart - fires when file as about to start uploading:
dialog - reference to dialog
filename - uploaded file name
record - file record
If handler returns false then file upload will be canceled.
-
fileuploadstart - fires when file has started uploading:
dialog - reference to dialog
filename - uploaded file name
record - file record
-
uploadsuccess - fires when file is successfuly uploaded, parameters:
dialog - reference to dialog
filename - uploaded file name
data - js-object builded from json-data returned from upload handler response.
record - file record
-
uploaderror - fires when file upload error occured, parameters:
dialog - reference to dialog
filename - uploaded file name
data - js-object builded from json-data returned from upload handler response.
record - file record
-
uploadfailed - fires when file upload failed, parameters:
dialog - reference to dialog
filename - failed file name
record - file record
-
uploadcanceled - fires when file upload canceled, parameters:
dialog - reference to dialog
filename - failed file name
record - file record
-
uploadstart - fires when upload process starts, parameters:
dialog - reference to dialog
-
uploadstop - fires when upload process stops, parameters:
dialog - reference to dialog
-
uploadcomplete - fires when upload process complete (no files to upload left), parameters:
dialog - reference to dialog
注意该多文件上传,每次其实只上传了一个文件,多个文件是分多次上传的。
看到了有很多后台代码采用了多文件 循环读取,只是没有必要的,我们只要当一个文件处理就可以了。
网上很多例子,也只能称为例子,离应用还有点距离,应用的时候,还需要灵活点
比如我们需要传入自己的参数,网上很难找到,其实我们可以在事件中来改变 提交的参数,
采用属性 base_params:{ hehe: "wayfoon" } 来实现,
function onUploadSuccess(dialog, filename, resp_data, record)
{
你可以改变dialog的某些值
resp_data 是返回的json数据
}
分享到:
相关推荐
这个文件是重写ext的ColorPickerFieldPlus控件,实现自定义调色,和ps取颜色一样,比Ext自带的颜色多很多,是自己可以调的
基于extjs的.NET3.5控件Coolite 1.0.0.34580 (Preview预览版), *************************************************** * Version 1.0.0 升级日志 * *************************************************** 1. ...
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...
EXT MonthPicker 月份选择控件,在页面插入js, 在需要的面板或者form面板插入即可 var item ={ xtype: 'monthfield', width: 150, fieldLabel: '月份', labelAlign: 'right', labelSeparator: ' ', ...
这个压缩包是本人从Ext官方论坛收集的用户扩展控件,针对EXT版本2.x,里面有树表格,图表控件,上传控件,表格过滤控件,通知窗口控件等等。 大部分解压后放入ext的example文件夹下就可以运行,有少数几个需要部署到...
2.代码中引用控件代码如下: { xtype: 'uxipfield', id:'sbt', fieldLabel: 'sbt', width:200 },{ xtype: 'combotimefield', id:'nmd', name:'test.nmd', fieldLabel: 'nmd', width:200 },{ xtype: '...
因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.
很好的extjs控件,适合asp.net开发,源码可以根据需要进行修改,项目使用时只需引用Coolite.Examples/bin目录下面的两个dll文件(Coolite.Ext.UX.dll和Coolite.Ext.Web.dll)即可。
15.5 在IE中使用Firebug 15.5.1 前端调试利器DebugBar 15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 ...
可以进行多选的带checkbox的combobox,大家运行一下就知道了。 本次修正了在combox的displayfield和valuefield不一致时会产生的错误
Ext.ux.DateTimeField控件已在Sencha论坛上浮动。 有一些补丁程序使其可用于5.1。 参见此处: : 什么有效 我得到了最新版本,将类重命名为更类似于当前的Ext 5.1架构,并修复了尝试选择时间控件时的错误。 过时的...
1.先按顺序导入 [removed][removed] [removed][removed] [removed][removed] [removed][removed] ... var startTime = Ext.create('Ext.ux.form.DateTimeField',{ filedLabel:'开始时间', name:'startTime' });
修改extjs控件,支持只选择年月,或者只选择年。 只要设置format:“Y-m”,"Y"即可。 xtype:'monthfield' 因为extjs的bug(3月30如果选择2月将自动变成3月)。所以需要修改monthField中safeParse方法: else if ("Y-m...
15.5 在IE中使用Firebug 15.5.1 前端调试利器DebugBar 15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 ...
自己新写的extjs年份控件,直接new Ext.ux.MyYear 即可使用
ExtJS中是控件扩展Ext.ux.grid.ProgressColumn ,GroupCombobox, mediaDemo ,PasswordMeter和三个从国外网上当下的主题(皮肤)
在开发过程中,遇到仅需要Extjs选择年月的控件,在国内搜索了些资源,因为Extjs5还未普遍开来加上很多UI框架的诞生,似乎关于Extjs5的资源很少。 在StackFlow搜索到了自己想要的答案,今天放在这里和大家一起分享。 ...
Ext5.1或Ext6.0测试通过。 拷贝文件: 将DateTimeField.js 和 DateTimePicker.js放在ext/src/ux目录下 页面引用 requires : [ 'Ext.ux.DateTimeField' ] 使用方式: { fieldLabel:'开始时间', xtype:'...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用