- 浏览: 1431680 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
扩展了 Ext.Panel ,加入文件框列表 ,并控制删除 ,ie预览图片等功能 ,提交后,向服务器递交 ,文件编号列表
if (!yiminghe) var yiminghe = {}; yiminghe.multiFileUploadField = Ext.extend(Ext.Panel, { layout: 'fit', //文件编号Id的前缀 startId: 'multi_file_up', //最多上传文件数目 limit: 3, initComponent: function() { //文件编号Name的前缀,用于向服务器提交 if (!this.startName) this.startName = this.startId; this.items = { xtype: 'hidden', value: '', name: this.startName + '_count', id: this.startId + '_count' }; yiminghe.multiFileUploadField.superclass.initComponent.call(this); this.num = 0; }, // private onRender: function(ct, position) { yiminghe.multiFileUploadField.superclass.onRender.call(this, ct, position); }, //删除面板的全部文件框 delAll: function() { var files = Ext.getCmp(this.startId + '_count').getValue(); //alert('|' + files + '|'); var items = files.split(' '); for (var i = 0; i < items.length; i++) { //alert(items[i]); if (items[i]) { this.remove(this.startId + '_column_' + items[i]); if (Ext.isIE) { this.remove(this.startId + '_previewpanel_' + items[i]); } } } this.num = 0; Ext.getCmp(this.startId + '_count').setValue(''); }, //面板中是否有文件 isEmpty: function() { var files = Ext.getCmp(this.startId + '_count').getValue(); return files.trim() == ''; }, //向面板中加入文本框 addFile: function() { var files = Ext.getCmp(this.startId + '_count').getValue().trim(); if (files.split(' ').length >= this.limit) { alert('最多能上传 ' + this.limit + ' 个文件!'); return; } this.num++; var curNum = this.num; Ext.getCmp(this.startId + '_count').setValue(Ext.getCmp(this.startId + '_count').getValue() + " " + curNum); var fileConfig = {}; for (var p in this.fileConfig) { fileConfig[p] = this.fileConfig[p]; } fileConfig.id = this.startId + '_file_' + curNum; fileConfig.name = this.startName + '_file_' + curNum; var startId = this.startId; fileConfig.listeners = { 'fileselected': function(c, v) { Ext.getCmp(startId + '_title_' + curNum).setValue(yiminghe.multiFileUploadField.getFileName(v)); if (Ext.isIE) { yiminghe.multiFileUploadField.preview(v, startId + '_previewpanel_' + curNum, startId + '_previewdiv_' + curNum); } } }; var n = this.add({ layout: 'column', autoHeight: true, id: this.startId + '_column_' + curNum, items: [ { columnWidth: .5, layout: 'form', labelWidth: this.labelWidth, items: [{ xtype: 'textfield', fieldLabel: '文件名称', id: this.startId + '_title_' + curNum, anchor: '95%', name: this.startName + '_title_' + curNum }] }, { columnWidth: .3, layout: 'form', labelWidth: this.labelWidth, items: [fileConfig] }, { columnWidth: .2, layout: 'form', items: [{ xtype: 'button', text: '清除', handler: function() { this.remove(n); if (Ext.isIE) { this.remove(Ext.getCmp(this.startId + '_previewpanel_' + curNum)); } Ext.getCmp(this.startId + '_count').setValue(Ext.getCmp(this.startId + '_count').getValue().replace(' ' + curNum, '')); }, scope: this }] } ] }); if (Ext.isIE) { this.add({ xtype: 'panel', html: '<div id="' + this.startId + '_previewdiv_' + curNum + '" ext:qtip="TODO" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( sizingMethod = scale );">' + '</div><br><br>', title: '图片预览', collapsible: true, hidden: true, id: this.startId + '_previewpanel_' + curNum }); } this.doLayout(); }, afterRender: function() { yiminghe.multiFileUploadField.superclass.afterRender.call(this); } }); yiminghe.multiFileUploadField.getFileName = function(file) { var i = file.lastIndexOf("/"); if (i == -1){ i = file.lastIndexOf("\\"); } var name = file; if (i != -1){ name = file.substring(i + 1, file.length); } var j = name.lastIndexOf("."); if (j != -1){ return name.substring(0, j); }else{ return name; } } yiminghe.multiFileUploadField.getFileExt = function(file) { var i = file.lastIndexOf("."); if (i == -1){ return ""; } var t = file.substring(i + 1, file.length); var j = t.lastIndexOf("/"); if (j == -1){ j = t.lastIndexOf("\\"); if (j == -1){ return t; } } return ""; } yiminghe.multiFileUploadField.preview = function(fname, panel, div) { var fext = yiminghe.multiFileUploadField.getFileExt(fname).toLowerCase(); if (fext == "gif" || fext == "bmp" || fext == "jpg" || fext == "jpeg" || fext == "png") { Ext.getCmp(panel).body.hide(); var newPreview = document.getElementById(div); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fname; newPreview.style.width = "400px"; newPreview.style.height = "300px"; Ext.getCmp(panel).show(); Ext.getCmp(panel).body.slideIn('l', { stopFx: true, duration: .2 }); } else { Ext.getCmp(panel).hide(); } } Ext.reg('multifileupload', yiminghe.multiFileUploadField);
外部调用: 使用了 Ext 例子 自带的 fileuploadfield 组件
var fileConfig = { xtype: 'fileuploadfield', emptyText: '选择文件上传', fieldLabel: '上传文件', anchor: '95%', listeners: { 'fileselected': function(c, v) { } }, buttonCfg: { text: '', iconCls: 'upload-icon' } }; var eform = new Ext.FormPanel({ labelAlign: 'left', frame: true, animCollapse: true, fileUpload: true, labelWidth: 70, method: 'POST', id: 'resolveBug_form', defaults: { anchor: '95%', msgTarget: 'side' }, items: [ { xtype: 'multifileupload', fileConfig: fileConfig, id: 'multi_test_resolve', startId: 'resolveBug_files', startName: 'editBug_files', labelWidth: 70, limit: 3 }], listeners: { beforeaction: function() { if (!window.fileProgressPanel) { window.fileProgressPanel = new yiminghe.fileProgressPanel(); } if (!Ext.getCmp('multi_test_resolve').isEmpty()) window.fileProgressPanel.start(); else Ext.MessageBox.wait('正在提交'); }, actioncomplete: function() { if (!Ext.getCmp('multi_test_resolve').isEmpty()) { window.fileProgressPanel.stop(); Ext.getCmp('multi_test_resolve').delAll(); } else Ext.MessageBox.hide(); eform.form.reset(); }, actionfailed: function() { if (!Ext.getCmp('multi_test_resolve').isEmpty()) window.fileProgressPanel.stop(); else Ext.MessageBox.hide(); } }, buttons: [{ text: '添加文件', handler: function() { Ext.getCmp('multi_test_resolve').addFile(); } }, { text: '确定', handler: function() { if (eform.form.isValid()) { eform.form.submit({ url: 'bug/BtsSetBugDO_ext.jsp', success: function(form, action) { //Ext.Msg.alert('成功', '修改成功!'); window.grid.reload(); if (window.grid2 && window.w_bug.isVisible()){ window.grid2.reload(); } }, failure: function(form, action) { Ext.Msg.alert('失败', action.result.data.info); } // waitMsg : '正在保存数据,稍后...' }); window.resolve_bug.hide(); } else { // Ext.Msg.alert('信息', '请填写完成再提交!'); } } }] });
关于 fileProgressPanel 详见
Ext 实现 文件上传 进度显示
评论
3 楼
刘金剑
2011-03-22
multiFileUploadField 未定义
2 楼
刘金剑
2011-03-22
url: 'bug/BtsSetBugDO_ext.jsp', 这个页面里是怎么处理的?
1 楼
kingtoon
2010-04-13
发表评论
-
Extjs 实践细节备忘 -3
2009-04-12 20:26 23841. dragdrop 继承层次 dd - ... -
Extjs 实践细节备忘 -2
2009-04-12 05:43 27021. grid 列宽问题 可以指定 每列的宽度数值 ... -
Extjs 实践细节备忘 -1
2009-04-11 01:47 2659在使用 extjs 开发 OAOP 应用中 ,除了API文档外 ... -
长字串换行问题
2009-03-01 23:10 5691很久没用过 ,textarea ... -
Extjs portal 应用初探
2009-02-24 23:09 5950近期在研究拖放的实现 ,看了看 Extjs 的 portal ... -
Extjs 模块化动态加载js实践
2009-01-09 18:12 23372前一段转载了一篇 透明加载外部 javascript ... -
Extjs 聊天窗口 -续3 用pushlet来实现
2008-12-23 22:16 15928前一篇 自己实现了http长连接 , 很繁琐,后 ... -
Extjs 聊天窗口 -续2 - http长连接的实现
2008-12-16 00:55 13229认为长连接就是有个http请求被服务器阻塞了 ,这样的话浏览 ... -
Extjs CRUD 模板
2008-12-12 00:52 7734也算是一个总结吧,备忘,总结了一个增删改查的例子,以后要达到的 ... -
Ext 聊天窗口的实现 - 续
2008-12-02 15:13 6602<filter> <fil ... -
Ext 树操作
2008-11-10 23:21 4427后台 树 节点 定义 menu_info { ... -
Ext 一个聊天窗口的设计
2008-11-10 00:26 37231.关键是要 弹性设计,自动适应浏览器 部件要: ... -
Ext.data.Store 与 GridFilters
2008-11-03 16:12 5311Store 每次 reload 会记着上次的参数,比如 pa ... -
Ext 实现 文件上传 进度显示
2008-10-24 18:15 5122利用了 ahxu-commons-fileuploadex-b ... -
Ext official doc - class-event-observer
2008-10-23 18:20 1382....ppt -
Ext Grid 表头显示问题
2008-09-27 23:51 3291出现问题了,当 Grid div 放在 table 布局下的话 ... -
JSON marsh && unmarsh
2008-09-23 00:46 1909Ext 端用 //Encodes an Objec ... -
[extjs] formpanel 标准提交问题
2008-09-19 02:29 3276formpanel 的 标准提交 有 bug? var ta ... -
ComboBox 传值问题
2008-09-19 00:07 5175field -> textfield->trigg ... -
Ext 2 概述
2008-09-18 01:11 2237欢迎来到Ext 2.0。 在下列各章节中,你将会接触到E ...
相关推荐
8.2.4 使用DirectSubmit上传文件 235 8.3 Grid组件 238 8.3.1 一个结合DataWrite和RowEditor的Grid示例 238 8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 ...
9.5.1 标签面板的构成及其运行流程:ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签面板的配置项、属性、方法和事件 / 462 9.5.3 使用标签页 / 463 9.5.4 可重用的标签页 / 465 9.6 视图与选择模型...
安装在您的 phpBB-Forum 扩展文件夹中创建一个clausi/epgp文件夹,例如phpBB/ext/clausi/epgp将 zip 中的所有文件直接上传到您新创建的文件夹中。 注意:zip文件可以包含一个名为“phpbb-epgp-master”的文件夹,...
4.1.21 Ext.form.field.File文件上传字段 4.2 实现表单验证 4.2.1 常见的验证类型 4.2.2 表单验证(VType) 4.2.3 自定义VType验证 4.3 表单的提交和加载 4.3.1 Ext.form.action.Action基础 4.3.2 Ajax模式的...
三、Ajax文件上传 67 四、你来自远方 72 五、小结 73 第十二章:分页与ComboBox 74 一、关于分页 74 二、从Servlet获取当前页数据 74 三、创建ComboBox 76 四、小结 77 第十三章:面板(Panel) 78 一、漂亮的窗格从...
在前两种格式中,会将<来源>复制至<目的地>或将多个<来源>文件复制至已存在的<目录>,同时设定权限模式及所有者/所属组。在第三种格式中,会创建所有指定的目录及它们的主目录。长选项必须用的参数在使用短选项时也...
-ExtAspNet扩展的多语言包在js\languages\extaspnet目录下,目前只有en,zh_CN,zh_TW三种实现 -你可以向其中添加自己的语言版本,并执行js\languages下的pack.bat打包,最后编译工程。 +2009-09-01 v2.0.9 ...
039 如何从文件对话框中获取文件扩展名? 040 如何从文件对话框中获取文件标题? 041 如何获取文件对话框选择的多个文件? 042 如何在程序启动时弹出文件打开对话框? 第4章 标题栏与菜单栏 043 如何获取标题栏高度? 044...
-ExtAspNet扩展的多语言包在js\languages\extaspnet目录下,目前只有en,zh_CN,zh_TW三种实现 -你可以向其中添加自己的语言版本,并执行js\languages下的pack.bat打包,最后编译工程。 +2009-09-01 v2.0.9 ...