var applyFormPanel = new Beidasoft.Bap.FormPanel({
title : '申请信息',
loadDataServiceUrl : applyPanel_ServiceUrl,
submitServiceUrl : 'ReleasePlanApplyFormR/saveReleaseApply',
//region :'north',
height : 400,
border : false,
baseCls : 'x-panel',
bodyStyle:'overflow-x:hidden;',
autoScroll : true,
fileUpload: true,
labelWidth : 95,
width : '100%',
frame : true,
items : [{
xtype:'panel',
layout:'column',
labelWidth:95,
border:false,
items : [{
columnWidth:.975,
xtype:'panel',
layout:'form',
items : [fieldSet = new Ext.form.FieldSet({
title: '文件',
fieldLabel:'附件',
id : 'file',
autoHeight: true,
defaultType: 'textfield',
anchor:'98%',
defaultType:'displayfield',
autoScroll:true,
labelWidth:10
})]
}, addFileButton = new Ext.Button({
text:'添加',
id : 'addFileButton',
tabIndex: 23,
iconCls:'page_add',
handler : function() {
var number = fileNumber.getValue();
var fileName = 'file_'+number;
fileNumber.setValue(parseInt(number)+1);
var lText = '<a href="#" onclick="deleteInput(\''+fileName+'\')">×</a> ';
fieldSet.add({
xtype:'filefield',
anchor:'95%',
id:fileName,
nameValue:fileName,
leftText:lText,
allowBlank : false,
blankText : '附件不能为空'
});
fieldSet.doLayout();
}
})]
}, {
xtype:'panel',
layout:'form',
defaultType:'textfield',
items:[fileNumber = new Ext.form.Field({
inputType:'hidden',
id : 'fileNumber',
name:'fileNumber',
value:0
}), fileDelete = new Ext.form.Field({
inputType:'hidden',
name:'fileDelete'
})]
}, {
xtype:'hidden',
fieldLabel : '发布的任务ID',
id : 'taskID',
name : 'taskID',
anchor : '99%'
}, {
xtype: 'hidden',
fieldLabel : '当前的申请的recordId',
id : 'recordId',
name : 'recordId',
anchor : '90%'
}]
});
applyFormPanel.on('loaddata', function(r) {
fieldSet.removeAll();
// 增加下载文件的链接
var text = r.responseText.replace(/\n\r/g ,'');
var data = eval('(' + text + ')');
if(!data.files) return;
for(var i = 0 ; i < data.files.length; i++){
var item = data.files[i];
var file = eval('(' + item.file + ')'); // 存放文件信息的对象
// 下载地址
var link = '/domain/downloadfileajax.cmd?fileid='+file.id;
var ahref = "<a href='"+link+"'>"+file.text+"</a>";
// 删除链接
var ref = "<a href='#' onclick='deleteFile(\""+file.id+"\")'>×</a>";
ref += " "+ahref;
fieldSet.add({id:file.id,value: ref}); //加入的对象中,id为其file.id
}
fieldSet.doLayout();
});
//删除附件方法
function deleteInput(id) {
fieldSet.remove(id);
var num = Ext.getCmp('fileNumber').getValue();
Ext.getCmp('fileNumber').setValue(parseInt(num)-1);
}
function deleteFile(id) {
var v = fileDelete.getValue();
if (v != '') {
v += ',';
}
v += id;
fileDelete.setValue(v); // 记录删除的文件id
fieldSet.remove(id); // 在fieldSet中删除该条记录
}
分享到:
相关推荐
在ExtJS4中实现多附件上传功能,我们可以利用其丰富的组件系统和自定义组件的能力。这篇博客文章(链接已提供)应该详细介绍了如何创建一个自定义的上传面板组件。 在ExtJS中,组件是构建用户界面的基本单元,它们...
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
在"EXTJS3.0多文件上传组件"中,我们主要关注的是如何利用EXTJS3.0的功能来实现一个高效的、用户友好的多文件上传功能。 首先,`swfupload.js`是Flash-Based的文件上传库,它允许用户在不离开当前页面的情况下进行...
接下来,创建一个工作表,这是Excel中的一个页面,可以添加多个工作表到工作簿中。 ```java HSSFSheet sheet = workBook.createSheet(); ``` 4. **设置工作表名称** 可以给工作表命名,这里将工作表命名为...
在IT行业中,文件上传是Web应用中常见的功能之一,特别是在数据...用户可以方便地选取多个文件,看到清晰的上传进度和速度,同时具备取消上传的能力。这种方案提高了用户的交互体验,也使得文件管理更加高效和安全。
通过以上步骤,你可以创建一个功能完备的多附件上传组件,它不仅能够处理多个文件,还提供了实时的上传进度反馈。在实际项目中,你可能还需要根据具体需求进行定制,例如添加文件预览功能,或者对大文件进行分块上传...
3.解压后请将所有附件放置您extjs包examples文件夹里任意一个组件包即可 4.此组件继承的是Ext.Panel,而不是Button,所以此组件并没有所有Ext.Button的功能但是拥有所有Ext.Panel功能并新增了点击事件(使用规范请参照...
它允许用户一次选择多个文件,显著提高了文件上传的效率和用户体验。在网页设计中,传统的单个文件上传方式往往限制了用户的选择,而SWFUpload的多文件选择特性解决了这一问题,使得用户能够在一次操作中上传多个...
4. **模块的增删改查**:OA系统通常包含多个业务模块,如人事、财务、项目等,每个模块都需要实现基本的CRUD(Create, Read, Update, Delete)操作。ExtJS的FormPanel和Store结合服务器接口,能够便捷地实现这些操作...
同时,由于`$postForm`函数的通用性,它可以在多个地方复用,提高了代码的复用率。 在EXTJS中,表单提交的优化不仅仅体现在代码量的减少,还体现在对错误处理的标准化和用户体验的提升。例如,`waitMsg`提供了一个...
通过这些配置,用户可以选择多个文件并开始上传。 在Struts2的Action中,我们需要创建一个接收文件的POJO(Plain Old Java Object),该对象的属性应与上传文件的字段名相对应。Struts2会自动将上传的文件绑定到...
"Ext 多文件上传面板扩展"是一个用于Web应用的组件,它允许用户同时上传多个文件。这个组件基于ExtJS库,一个广泛使用的JavaScript框架,用于构建富客户端应用程序。ExtJS提供了一个强大的组件模型,使得开发复杂的...
Java实现文件下载,尤其是处理Excel文件,涉及到多个层面的技术细节,包括但不限于响应头的设置、文件读写、错误处理,以及前端与后端的协调。通过深入理解这些技术要点,开发者可以构建出既高效又安全的文件下载...
在EXTJS中,多文件上传功能是一个常见的需求,特别是在网页应用中处理大量数据时。EXTJS是一个强大的JavaScript库,提供了丰富的组件和API,用于构建富客户端应用。在本篇文章中,我们将深入探讨如何利用EXTJS实现多...
- Radio:单选按钮,用于从多个选项中选择其一; - Date:日期选择控件,用于日期选择; - Combo:下拉选择控件,用于展示一组选项供用户选择; - SelectWin:选择窗口控件,提供一个窗口供用户选择; - ComboWin:...
通过使用`<input type="file">`标签和拖放API,我们可以实现多文件选择和无刷新上传,同时兼容现代浏览器,提供更好的用户体验。 2. **添加第三方视频代码功能**: 在内容编辑中,有时需要插入来自YouTube、Vimeo...
1. **多文件选择**:用户可以通过文件对话框一次性选择多个文件进行上传,极大地提高了上传效率,减少了用户的操作步骤。 2. **进度条显示**:在文件上传过程中,组件会显示每个文件的上传进度,使用户了解当前上传...
张英伟,一位拥有两年Java开发经验的工程师,专长在于Java Web和大数据开发。他的主要技能包括: 1. **Java开发**:张英伟精通...他的工作经验表明他能够独立承担并完成复杂项目的多个模块,且适应不同领域的需求。
金蝶BOS开发指南中的Web开发平台是一个为EAS Web产品提供开发基础的平台,它与GUI应用框架共享EAS Web服务端组件,并与BOS框架及业务模型协同工作,以实现模型驱动架构(MDA)。该平台旨在提供统一的业务开发模型,...