`
wamz1wn
  • 浏览: 21241 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs多个附件框实现方法

 
阅读更多

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>&nbsp;&nbsp;';
    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 += "&nbsp;&nbsp;&nbsp;&nbsp;"+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 多附件上传组件

    在ExtJS4中实现多附件上传功能,我们可以利用其丰富的组件系统和自定义组件的能力。这篇博客文章(链接已提供)应该详细介绍了如何创建一个自定义的上传面板组件。 在ExtJS中,组件是构建用户界面的基本单元,它们...

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,

    EXTJS3.0多文件上传组件

    在"EXTJS3.0多文件上传组件"中,我们主要关注的是如何利用EXTJS3.0的功能来实现一个高效的、用户友好的多文件上传功能。 首先,`swfupload.js`是Flash-Based的文件上传库,它允许用户在不离开当前页面的情况下进行...

    extjs实现excel导出

    接下来,创建一个工作表,这是Excel中的一个页面,可以添加多个工作表到工作簿中。 ```java HSSFSheet sheet = workBook.createSheet(); ``` 4. **设置工作表名称** 可以给工作表命名,这里将工作表命名为...

    Structs2+ExtJs多文件上传,多选文件加入列表

    在IT行业中,文件上传是Web应用中常见的功能之一,特别是在数据...用户可以方便地选取多个文件,看到清晰的上传进度和速度,同时具备取消上传的能力。这种方案提高了用户的交互体验,也使得文件管理更加高效和安全。

    ExtJS 3.0 调用 swfupload 制作的多附件上传组件,带进度条

    通过以上步骤,你可以创建一个功能完备的多附件上传组件,它不仅能够处理多个文件,还提供了实时的上传进度反馈。在实际项目中,你可能还需要根据具体需求进行定制,例如添加文件预览功能,或者对大文件进行分块上传...

    ExtJS如何自定义图片按钮组件

    3.解压后请将所有附件放置您extjs包examples文件夹里任意一个组件包即可 4.此组件继承的是Ext.Panel,而不是Button,所以此组件并没有所有Ext.Button的功能但是拥有所有Ext.Panel功能并新增了点击事件(使用规范请参照...

    SWFUpload多附件上传控件DEMO

    它允许用户一次选择多个文件,显著提高了文件上传的效率和用户体验。在网页设计中,传统的单个文件上传方式往往限制了用户的选择,而SWFUpload的多文件选择特性解决了这一问题,使得用户能够在一次操作中上传多个...

    oa.wxg.rar_extjs oa_extjs 权限_oa.wxg

    4. **模块的增删改查**:OA系统通常包含多个业务模块,如人事、财务、项目等,每个模块都需要实现基本的CRUD(Create, Read, Update, Delete)操作。ExtJS的FormPanel和Store结合服务器接口,能够便捷地实现这些操作...

    Extjs优化(二)Form表单提交通用实现

    同时,由于`$postForm`函数的通用性,它可以在多个地方复用,提高了代码的复用率。 在EXTJS中,表单提交的优化不仅仅体现在代码量的减少,还体现在对错误处理的标准化和用户体验的提升。例如,`waitMsg`提供了一个...

    Plupload多文件上传

    通过这些配置,用户可以选择多个文件并开始上传。 在Struts2的Action中,我们需要创建一个接收文件的POJO(Plain Old Java Object),该对象的属性应与上传文件的字段名相对应。Struts2会自动将上传的文件绑定到...

    Ext 多文件上传面板扩展

    "Ext 多文件上传面板扩展"是一个用于Web应用的组件,它允许用户同时上传多个文件。这个组件基于ExtJS库,一个广泛使用的JavaScript框架,用于构建富客户端应用程序。ExtJS提供了一个强大的组件模型,使得开发复杂的...

    java实现文件下载,并弹出保存对话框(Excel)

    Java实现文件下载,尤其是处理Excel文件,涉及到多个层面的技术细节,包括但不限于响应头的设置、文件读写、错误处理,以及前端与后端的协调。通过深入理解这些技术要点,开发者可以构建出既高效又安全的文件下载...

    ext多文件上传

    在EXTJS中,多文件上传功能是一个常见的需求,特别是在网页应用中处理大量数据时。EXTJS是一个强大的JavaScript库,提供了丰富的组件和API,用于构建富客户端应用。在本篇文章中,我们将深入探讨如何利用EXTJS实现多...

    Jxstar系统管理手册V2.0.pdf

    - Radio:单选按钮,用于从多个选项中选择其一; - Date:日期选择控件,用于日期选择; - Combo:下拉选择控件,用于展示一组选项供用户选择; - SelectWin:选择窗口控件,提供一个窗口供用户选择; - ComboWin:...

    优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘

    通过使用`&lt;input type="file"&gt;`标签和拖放API,我们可以实现多文件选择和无刷新上传,同时兼容现代浏览器,提供更好的用户体验。 2. **添加第三方视频代码功能**: 在内容编辑中,有时需要插入来自YouTube、Vimeo...

    UploadDialog3_x 下载

    1. **多文件选择**:用户可以通过文件对话框一次性选择多个文件进行上传,极大地提高了上传效率,减少了用户的操作步骤。 2. **进度条显示**:在文件上传过程中,组件会显示每个文件的上传进度,使用户了解当前上传...

    张英伟的简历1

    张英伟,一位拥有两年Java开发经验的工程师,专长在于Java Web和大数据开发。他的主要技能包括: 1. **Java开发**:张英伟精通...他的工作经验表明他能够独立承担并完成复杂项目的多个模块,且适应不同领域的需求。

    BOS V6.2开发指南_Web开发平台

    金蝶BOS开发指南中的Web开发平台是一个为EAS Web产品提供开发基础的平台,它与GUI应用框架共享EAS Web服务端组件,并与BOS框架及业务模型协同工作,以实现模型驱动架构(MDA)。该平台旨在提供统一的业务开发模型,...

Global site tag (gtag.js) - Google Analytics