"ZcWeb.component.form.UpDownLoadPanel 是一个基于 ExtJS 4.2 构建的多文件上传组件,它具有多文件上传、文件下载和文件删除的功能。这个组件扩展了 Ext.form.Panel,并定义了自己的数据存储(store)和相关配置,如字段定义、数据代理(proxy)以及异常处理机制。" 在 ExtJS 中,`Ext.define` 用于定义一个新的类,这里是定义了一个名为 `ZcWeb.component.form.UpDownLoadPanel` 的组件。它继承自 `Ext.form.Panel`,这是一个基本的表单组件,可以包含各种表单字段和其他控件。`alias` 属性为该组件创建了一个别名,使得可以通过 'widget.zcupdownloadpanel' 来引用它。 组件内部有一个 `zc_billIndex` 属性,可能用于记录或标识一些特定的状态。另外,`o_gridStore` 和 `o_gridPanel` 分别用于保存一个数据存储对象和一个网格面板,这些可能是用于显示和管理上传文件的。 在构造函数中,初始化了一个 `Ext.data.Store` 对象,用于存储文件信息。这个数据存储包含五个字段:`FFuJianName`(文件名)、`FFuJianServerFileName`(服务器上的文件名)、`FFileMimeType`(文件MIME类型)、`FFilePath`(文件路径)和 `FFileInputID`(可能用于关联文件输入元素)。每个字段都有 `iszcField` 属性,可能是一个自定义标记,用于组件内部的逻辑处理。 数据存储使用了一个 `ajax` 类型的代理(proxy),它与后端服务通信,获取和提交数据。`url` 指定了请求的URL,`timeout` 设置了超时时间,`reader` 定义了如何解析返回的 JSON 数据,包括数据的根属性(root)和总数属性(totalProperty)。 代理还监听了异常事件,当与服务器的通信发生错误时,会显示相应的错误消息。例如,如果服务器返回404错误,用户将看到 '找不到资源!' 的提示。其他情况下,错误信息将包含在状态文本中显示。 这段代码片段并未展示完整的组件实现,但提供了关于如何在 ExtJS 4.2 中实现多文件上传功能的基本框架,包括数据模型、数据存储、与服务器的交互以及错误处理等方面的知识。要完全理解并实现这样的组件,还需要对 ExtJS 的组件模型、数据绑定、事件处理等有深入的了解。
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页未读,继续阅读
- 粉丝: 4
- 资源: 12
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦