- 浏览: 818159 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuhanwm910731:
我现在需要实现复选(非级联选择)的树形下拉菜单,麻烦发给我一份 ...
extjs3.X支持树型的下拉控件 -
shine1200:
“所以咱们现在设置的虚拟路径“/message/upload/ ...
weblogic虚拟路径的配置和使用(2) -
icefireforest:
Fangrn 写道jx_dream 写道楼主,我最近在做树形下 ...
extjs3.X支持树型的下拉控件 -
cloudfile:
谢谢分享!
c++库c#调用开发时需要注意的一点 -
xuweilinbegin:
我也要一份哦:xuweilin15353@163.com,谢谢 ...
extjs3.X支持树型的下拉控件
为了能够在页面中做到动态的添加和删除附件信息,着实费了不少精力
Fairies.form.FileUploadField = Ext.extend(Ext.form.TextField,{ isDisable:false,//是否被Disable,则删除按钮不能使用 buttonText:'选择文件...', buttonOnly:true, buttonOffset:3, readOnly:true, isToRemind:true,//是否提醒 autoSize:Ext.emptyFn, initComponent:function(){ Fairies.form.FileUploadField.superclass.initComponent.call(this); this.addEvents( 'fileselected' ); }, onRender:function(ct, position){ Fairies.form.FileUploadField.superclass.onRender.call(this, ct, position); this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap',id:Ext.id()}); this.wrap.parent().dom.setAttribute('id',Ext.id()); this.el.addClass('x-form-file-text'); this.el.dom.removeAttribute('name'); this.fileInput = this.wrap.createChild({ id:Ext.id(),name:this.name||this.getId(),cls:'x-form-file addfile',tag:'input',type:'file',size:1,style:'left:2px;cursor:hand;'}); var btnCfg = Ext.applyIf(this.buttonCfg||{}, { text: this.buttonText }); this.button = new Ext.Button(Ext.apply(btnCfg, {iconCls:'attach-icon', renderTo: this.wrap,disabled:this.isDisable//,minWidth:100 })); this.msg_e=this.wrap.createChild({id:Ext.id(),style:'position:absolute;top:0px;left:130;'}); this.msg_p=new Ext.Panel({renderTo:this.msg_e,border:false,width:380,border:false}); if(this.buttonOnly){ this.el.hide(); this.wrap.setWidth(this.button.getEl().getWidth()); } this.fileInput.on('change', function(){ var v = this.fileInput.dom.value; this.setValue(v);this.addMsg(v); this.fireEvent('fileselected',this,v); },this); }, addMsg:function(v){ var p=new Ext.Panel({bodyStyle:'padding:0px 0px 3px 3px',border:false,layout:'table',items:[ {columnWidth:0.78,layout:'form',items:[new Ext.form.Label({html:v,style:'font: normal 12px verdana,arial,tahoma;',width:300})]} ,{columnWidth:0.22,layout:'form',items:[new Ext.Button({text:'删除',tooltip:'删除文件',iconCls:'icon-delete',disabled:this.isDisable,listeners:{'click':function(t,e){ p.destroy();this.msg_p.remove(p);this.msg_p.doLayout(true);this.setHeight(this.msg_p.getInnerHeight()); },'mouseover':function(t,e){ t.getEl().parent().parent().parent().parent().parent().first().highlight(); },scope:this}})]} ]}); this.msg_p.insert(0,p); this.msg_p.doLayout(true); p.getEl().appendChild(this.fileInput); this.fileInput.hide(true); this.fileInput.setStyle('display','none'); this.fileInput = this.wrap.createChild({id: Ext.id(),name: this.name||this.getId(),cls: 'x-form-file',tag: 'input',type: 'file',size: 1}); this.fileInput.on('change', function(){ var v = this.fileInput.dom.value; this.setValue(v);this.addMsg(v); this.fireEvent('fileselected', this, v); }, this); this.wrap.insertFirst(this.fileInput); this.msg_p.doLayout(true); this.setHeight(this.msg_p.getInnerHeight()); }, showFiles:function(atts){ //展示下载的链接:atts 必须包括attachId and attachmentName,atts是一个数组 ;url是下载的连接 ,such as 'HQ/downloadAttachment.action' this.msg_p.destroy(); this.msg_p=new Ext.Panel({renderTo:this.msg_e,border:false,width:380}); /*for(i=0;i<this.msg_p.getSize();i++){ this.msg_p.remove(this.msg_p.getComponent(i)); }*/ for(i=0;i<atts.length;i++){ var name = atts[i].attachmentName?atts[i].attachmentName:atts[i].attachName; var p=new Ext.Panel({bodyStyle:'padding:0px 0px 0px 0px',border:false,layout:'table',items:[ {columnWidth:0.78,layout:'form',items:[new Ext.form.Label({html:'<a href="'+this.url+'?id='+atts[i].attachId+'" onclick="javascript:window.unload=false; return '+(this.isToRemind?'download()':'true')+'">'+name+'</a><br/>',style:'font: normal 12px verdana,arial,tahoma;',width:300})]}, {columnWidth:0.22,layout:'form',items:[new Ext.Button({text:'删除',tooltip:'删除文件',disabled:this.isDisable,delId:atts[i].attachId,iconCls:'icon-delete',listeners:{'click':function(t,e){ Ext.Msg.show({title:'提示:', closable:false, msg:'您确定要删除您指定的文件吗?选择”是“将永久删除该文件。', buttons: Ext.Msg.YESNO, fn:function(btn){ if(btn=='yes'){ //如果没有提交到后台的文件则直接删除,否则提交到后台执行删除 Ext.lib.Ajax.request('POST', 'HQ/removeAttachements.action?AJAX.REQUEST=true', { success:function(request) { var message = request.responseText; var p_=Ext.getCmp(t.getEl().parent().parent().parent().parent().parent().parent().parent().parent().parent().parent().id); p_.destroy(); this.msg_p.remove(p_);this.msg_p.doLayout(true); }, failure : function(request){ Fairies.form.MessageBox(Ext.decode(request.responseText)); },scope:this },'&ids='+t.delId); } }, icon: Ext.MessageBox.QUESTION,scope:this }); },'mouseover':function(t,e){ t.getEl().parent().parent().parent().parent().parent().first().highlight(); },scope:this}})]} ]}); this.msg_p.insert(0,p); this.msg_p.doLayout(true); this.setHeight(this.msg_p.getInnerHeight()); } }, setParams:function(obj){ this.url = obj.url; this.docType = obj.docType; this.mydocId = obj.mydocId; this.storeUrl = obj.storeUrl; }, reloadFiles:function(){//重新现实attPanel Ext.Ajax.request({ url:'HQ/getAllAttachments.action', params:{docId:this.mydocId, docType:this.docType,start:0,limit:10000}, success:function(request){ var message =request.responseText;//这里可以获取服务器返回的数据内容 var res = Ext.decode(message); var atts=res.result; if(!atts){ atts = res.data; } this.showFiles(atts); }, failure:function(){ Ext.Msg.alert("网络出现错误"); },scope:this }); }, reloadContractFiles:function(){ Ext.Ajax.request({ url: this.storeUrl, params:{docId:this.mydocId, docType:this.docType, start:0,limit:10000}, success:function(request){ var message =request.responseText;//这里可以获取服务器返回的数据内容 var res = Ext.decode(message); var atts = res.result; this.showFiles(atts); }, failure:function(){ Ext.Msg.alert("网络出现错误"); },scope:this }); }, setPContainer:function(pcontainer){ this.pcontainer = pcontainer; }, onResize : function(w, h){ h=h||this.msg_p.getInnerHeight(); Ext.form.FileUploadField.superclass.onResize.call(this, w, h); this.wrap.setSize(w,h); if(!this.buttonOnly){ var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset; this.el.setWidth(w); } }, preFocus:Ext.emptyFn, getResizeEl:function(){return this.wrap;}, getPositionEl:function(){return this.wrap;}, alignErrorIcon:function(){this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);}, setDisabled:function(b){//设置控件是否可用 this.isDisable=true; if (b){ this.button.disable(); this.fileInput.setStyle('display','none'); if (this.msg_p.items){ for(var j=0;j<this.msg_p.items.length;j++) this.msg_p.items.get(j).items.get(1).items.get(0).disable(); } }else{ this.button.enable(); this.fileInput.setStyle('display',''); if (this.msg_p.items){ for(var j=0;j<this.msg_p.items.length;j++) this.msg_p.items.get(j).items.get(1).items.get(0).enable(); } } } }); Ext.reg('uxfileuploadfield', Fairies.form.FileUploadField);
调用方法:
var attPanel = new Fairies.form.FileUploadField({ fieldLabel:'文件附件', name:'attachements',id:'attachmentManageId',anchor:'87%' });
效果:
评论
8 楼
Fangrn
2010-11-17
File的数组
7 楼
swimmingdog
2010-11-17
我把这个组件放到Form表单里,可是我不明白我在Struts2中,FileUploadField对应的是一个File的数组还是什么,所以恳请您如果方便的话,把Struts2的代码共享下,我刚研究ExtJs不到两周的时间,公司还急着做ExtJs的邮件系统,我现在很多东西还朦朦胧胧的,先谢谢您了!
6 楼
Fangrn
2010-11-16
和普通的struts2的文件上传下载一样的了
5 楼
swimmingdog
2010-11-16
您好 能否把ACTION中的方法公布一下 谢谢
4 楼
penwei
2010-07-12
感谢楼主共享CSS
3 楼
Fangrn
2010-07-11
.addfile{cursor:pointer!important;cursor:hand;left:-24px}
.addfile{width:80px;height:18px;position:absolute;top:0px;left:-5px;left:-3px;opacity:0;filter:alpha(opacity=0)}*:lang(zh)
.attach-icon{background-image:url(../images/attach.png)!important;}
.x-form-file-wrap {
position: relative;
height: 22px;
}
.x-form-file-wrap .x-form-file {
position: absolute;
/*right: 300;*/
left:0;
-moz-opacity: 0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
height: 22px;
}
.x-form-file-wrap .x-form-file-btn {
position: absolute;
/*right: 300;*/
left:0;
z-index: 1;
}
.x-form-file-wrap .x-form-file-text {
position: absolute;
left: 0;
z-index: 3;
color: #777;
}
.addfile{width:80px;height:18px;position:absolute;top:0px;left:-5px;left:-3px;opacity:0;filter:alpha(opacity=0)}*:lang(zh)
.attach-icon{background-image:url(../images/attach.png)!important;}
.x-form-file-wrap {
position: relative;
height: 22px;
}
.x-form-file-wrap .x-form-file {
position: absolute;
/*right: 300;*/
left:0;
-moz-opacity: 0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
height: 22px;
}
.x-form-file-wrap .x-form-file-btn {
position: absolute;
/*right: 300;*/
left:0;
z-index: 1;
}
.x-form-file-wrap .x-form-file-text {
position: absolute;
left: 0;
z-index: 3;
color: #777;
}
2 楼
Fangrn
2010-03-25
呵呵,上边已经将使用代码贴出来了的
注意两个方法:setParams(),reloadContractFiles()
注意两个方法:setParams(),reloadContractFiles()
1 楼
cmliu2004
2010-03-24
老兄,可否告知你的这段代码怎么使用呢?
发表评论
-
extjs3支持按步骤处理(向导)控件
2010-09-26 13:25 3238有些业务处理我们不能一步做完,所以我们希望实现一个类似于set ... -
extjs3.X支持树型的下拉控件
2010-09-26 08:58 2658exejs是一个非常方便我们扩展自己控件的js框架,我们能想到 ... -
Javascript: unterminated string literal解决方法
2010-07-28 14:03 1859先将\r\n替换为<br>,然后再将\r与\n替换 ... -
Extjs 简单扩展 Component 实现点击刷新的验证码
2010-07-24 12:03 1254Ext.Image=Ext.extend(Ext.Comp ... -
扩展 ExtJs的编辑器(HtmlEditor):插入图片
2010-05-07 11:18 3869Ext内置的编辑器功能相对还是很弱,例如插入 ... -
ExtJS3 下拉树TreeComboBox的修改
2009-12-23 09:48 2323拜读了[Ext 3.x + Ext 2.x] 下拉树 Ext ... -
Ext.form.ComboBox加载json时刻默认选中的解决
2009-12-23 09:47 2004重写combo的setValue Ext.override( ... -
Extjs-RowExpander 的异步调用
2009-12-23 09:26 2178RowExpander是Extjs中grid的一个插件,可以在 ... -
给TextField添加tip信息
2009-10-16 11:59 3686有些时候我们需要给文本框添加提示信息,但是默认的控件是不支持的 ... -
支持显示树的下拉选择框
2009-10-16 10:14 1622extjs是一个非常不错的页面显示架构,在扩展页面组件方面也是 ... -
extjs 解决combox和datefield 下拉部份被其他层遮盖的问题
2009-04-21 20:17 2695在我们使用combox和datefield 的时候,常遇到弹出 ...
相关推荐
在开发Web应用时,我们经常需要实现类似163邮箱的附件上传和下载功能。这个功能不仅涉及到用户界面的设计,还包括后端服务器处理文件、存储和传输等技术。以下是一些关键知识点的详细说明: 1. **前端上传组件**: ...
在ASP.NET环境中,SWFUpload可以提供类似163邮箱的高级附件上传体验,支持预览、进度条显示以及批量上传等特性。 首先,我们要理解SWFUpload的工作原理。它利用Flash技术绕过浏览器的同源策略限制,可以在后台无...
【163邮箱附件上传特性】 163邮箱的附件上传功能以其简洁易用而著名,其中的亮点包括: 1. **实时文件大小显示**:在选择文件后,系统会立即显示选定文件的总大小,帮助用户了解上传的文件是否超过邮件附件的限制...
这个源码演示了如何在ASP.NET环境中集成SwfUpload,实现类似163邮箱的文件上传功能。 1. **ASP.NET Web开发**:ASP.NET提供了多种开发模式,如Web Forms、MVC、Web API等,这里可能采用的是Web Forms,因为它更适合...
在本教程中,我们将探讨如何在ASP.NET中实现多附件上传和附件编辑的功能,同时考虑客户端的编辑操作以及如何标记附件以便进行删除。 一、多附件上传 1. HTML表单设计:首先,我们需要创建一个HTML表单,包含多个...
在"struts 附件上传 仿照163样式 实例"中,我们主要探讨的是如何使用 Struts 框架来实现在Web应用中上传附件的功能,并且在界面上模仿163邮箱的风格。 首先,了解Struts的上传组件。在Struts1中,通常使用`org....
在ASP.NET(C#)开发中,创建一个类似163邮箱的文件上传功能是一项常见的任务。这个"仿163邮箱的上传代码"示例旨在实现一个无刷新的多文件上传功能,允许用户一次性上传三个文件。无刷新技术通常通过AJAX实现,提供更...
总的来说,ASP.NET AJAX技术为开发高效、交互性强的Web应用提供了强大的工具,而“asp.net(ajax技术)163网页邮箱”项目则是一个实际应用场景,涵盖了新邮件提醒和单附件上传等功能,为学习和掌握这些技术提供了...
这个"java extjs 仿163邮箱源码"项目显然旨在模仿163邮箱的前端功能,利用这两种技术来实现一个类似的功能丰富的邮件系统。下面我们将深入探讨这两个技术以及如何在实际应用中结合它们。 **Java** Java是一种面向...
Visual C++程序开发范例宝典配套光盘,因大小受限,所以分成8部分上传,必须全部下载才能正常解压! 第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 实例002 带图标的程序菜单 实例003...
Visual C++程序开发范例宝典配套光盘,因大小受限,所以分成8部分上传,必须全部下载才能正常解压! 第1章 窗体与界面设计 1.1 菜单应用实例 实例001 在系统菜单中添加菜单项 实例002 带图标的程序菜单 实例003...
19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将...
19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将...
cc实例161 判断文件是否被改动 第6章 操作系统与Windows相关程序 6.1 启动相关设置 cc实例 162 进入WindowscXP前发出警告 cc实例163 实现关机.c重启计算机 cc实例164 将程序设置成为开机自动执行的程序 ...
cc实例163 实现关机.c重启计算机 cc实例164 将程序设置成为开机自动执行的程序 6.2 磁盘相关设置 cc实例165 判断驱动器属性 cc实例166 获取磁盘空间信息 cc实例167 获取磁盘序列号 ...
cc实例163 实现关机.c重启计算机 cc实例164 将程序设置成为开机自动执行的程序 6.2 磁盘相关设置 cc实例165 判断驱动器属性 cc实例166 获取磁盘空间信息 cc实例167 获取磁盘序列号 ...