ExtJS 4.2多文件上传组件:实现、功能与异常处理
ExtJS 4.2 多文件上传组件是基于ExtJS框架开发的一个高级功能,它封装了文件上传、下载和删除的操作,使得前端开发者能够更方便地处理多文件上传任务。这个自定义组件名为'ZcWeb.component.form.UpDownLoadPanel',并使用了Ext.form.Panel作为基类,通过alias命名空间'widget.zcupdownloadpanel'进行标识。 构造函数中,组件初始化了几个关键属性,如zc_billIndex(可能代表一个计数器或者某个业务标识),o_gridStore(用于存储上传文件的数据,包含字段如FFuJianName(文件名)、FFuJianServerFileName(服务器文件名)、FFileMimeType(文件类型)、FFilePath(文件路径)和FFileInputID),以及一个自动销毁的代理对象,用于与后台服务器进行异步通信。该代理配置了Ajax请求的方式,指定URL为 '../Home/GetDataUserSql',设置超时时间为90000毫秒,并使用JSON格式的reader来解析返回的数据。 在处理错误方面,组件具备一定的容错能力。如果操作出现错误,会检查错误状态码。如果是404错误,会显示一条错误消息告知用户“数据未找到”;其他未知错误则会解析response.responseText中的服务器返回信息,并根据解析结果给出相应提示。 此外,代码中还提到当从后台获取数据时,会检查一个名为'_errorserverjson'的变量,这可能是用来处理服务器返回的错误信息或者异常情况。通过这种方式,这个组件提供了一种用户友好的文件管理方式,适用于需要频繁上传、下载和管理文件的应用场景,如文件上传表单或文件管理系统。使用这个组件时,开发者可以轻松集成到自己的ExtJS 4.2项目中,提升用户体验和开发效率。
extend: 'Ext.form.Panel',
alias: 'widget.zcupdownloadpanel',
zc_billIndex: 0,
o_gridStore: false,
o_gridPanel: false,
p_deleteFiles:'',
constructor: function (config) {
var me = this;
me.o_gridStore = new Ext.data.Store({
fields: [{ name: 'FFuJianName', type: 'string', iszcField: true },
{ name: 'FFuJianServerFileName', type: 'string', iszcField: true },
{ name: 'FFileMimeType', type: 'string', iszcField: true },
{ name: 'FFilePath', type: 'string', iszcField: true },
{ name: 'FFileInputID', type: 'string', iszcField: true }],
autoDestroy: true,
proxy: {
type: 'ajax',
url: '../Home/GetDataUserSql',
timeout: 90000,
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
},
listeners: {
scope: this,
exception: function (sender, response, operation, eOpts) {
if (operation.error) {
ZC_Message_Error('加载单据附件错误,请求地址未找到!');
}
else
ZC_Message_Error('加载单据附件错误,错误信息:<br />' + operation.error.statusText);
}
else {
var _errorserverjson = Ext.decode(response.responseText, true);
if (_errorserverjson == null) {
ZC_Message_Error('加载单据附件错误!');
}
else
ZC_Message_Error('加载单据附件错误,错误信息:<br />' + _errorserverjson.error);
}
}
}
}
});
me.o_gridPanel = new Ext.grid.Panel({
store: me.o_gridStore,
frame: false,
border: 0,
columnLines: true,
columns: [{ xtype: 'rownumberer' },
{ align: 'center', text: "附件名称", dataIndex: 'FFuJianName', width: 350, sortable: false, renderer: function (value) { return '<div style="vertical-align: middle; text-align: left; height: 100%">' + value + '</div>'; } },
{ align: 'center', text: "文件路径", dataIndex: 'FFilePath', width: 250, sortable: false, renderer: function (value) { return '<div style="vertical-align: middle; text-align: left; height: 100%">' + value + '</div>'; } }],
viewConfig: { loadingText: '正在加载数据...' },
tbar: [{
text: '添加附件',
handler: function () {
剩余9页未读,继续阅读
- 粉丝: 30
- 资源: 6
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展