自己扩展的文件上传组件FileUploadField
最近看了ext3的examples下面的ux下的FileUploadField扩展组件,那个button看起来很丑,于是自己扩展了一个FileUploadField文件上传组件。此次扩展我试过两种方法,一种是将一个<input type='file'/>给隐藏起来,然后通过点击trigger触发隐藏了的file的click事件调出文件选择框,这个方法我试过了'触发隐藏了的file的click事件'这点在不同的浏览器上无法兼容,而且由于文件是通过js设置文件值的,所以在form.submit()的时候,浏览器出于安全考虑会阻止表单提交。第二种方法即是下面贴出来的代码,即将<input type='file'/>通过css给弄的很小(和一个trigger一般大)并且给它设置透明,这种方法是通过用户主动点击调出文件选择框。先看下如何应用的: {xtype:'fileuploadfield',id:'file1',fieldLabel:'上传附件',allowBlank:false,fileFieldName:'myfile',//<input type='file'/>的name属性fileFieldId:'myfile',//<input type='file'/>的id属性//校验文件类型vtype:'fileType',vtypeText:'上传文件必须是xls,doc,txt,ppt类型文件中的一种!!!',fileTypes:['xls','doc','txt','ppt'],enableClearValue:true,//显示清除<input type='file'/> value的triggertoolTip:true//toopTip显示文件全路径}/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license *//* * * @class Ext.ux.form.FileUploadField * @extends Ext.form.TwinTriggerField * Ext.ux.form.FileUploadField * * examples like this : * *{ *xtype:'fileuploadfield', *id:'file1', *fieldLabel:'上传附件', *allowBlank:false, *fileFieldName:'myfile', *fileFieldId:'myfile', *vtype:'fileType', *vtypeText:'上传文件必须是xls,doc,txt,ppt类型文件中的一种!!!', *fileTypes:['xls','doc','txt','ppt'], *enableClearValue:true, *toolTip:true *} */Ext.ns('Ext.ux.form');Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TwinTriggerField, {editable : false,readOnly : true,blankText : '请选要上传的文件!',//clear trggertrigger1Class : 'x-form-clear-trigger',//select trigger trigger2Class : 'x-form-search-trigger',//the hidden <input type='file'/> idfileFieldId : Ext.id(),//the hidden <input type='file'/> namefileFieldName : Ext.id(),fileTypes : [],fileTypesText : 'aaa',//toolTip MixedtoolTip : null,//enable show clear triggerenableClearValue : false,//hide trigger1hideTrigger1 : true, initComponent : function(){ Ext.ux.form.FileUploadField.superclass.initComponent.call(this);this.triggerConfig = { tag:'span', cls:'x-form-twin-triggers', cn:[ {tag: "img", id:'triger-clear'+this.fileFieldId, src: Ext.BLANK_IMAGE_URL, style:'visibility:visible',cls: "x-form-trigger " + this.trigger1Class}, {tag:'span', cls:'ux-cabinet', cn:[ {tag: "div", id:'wrap'+this.fileFieldId,cls:"ux-input-file-wrapper",cn: [ {tag: "input", name: this.fileFieldName, cls : 'ux-file',type: "file", id: this.fileFieldId} ]}, {tag: "img", id:"triger-search"+this.fileFieldId, src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class} ]} ]};this.hideTrigger1 = true;if(this.enableClearValue){this.onTrigger1Click = this.clearValue;}this.addEvents( /** * @event fileselected * Fires when the underlying file input field's value has changed from the user * selecting a new file from the system file selection dialog. * @param {Ext.ux.form.FileUploadField} this * @param {String} value The file value returned by the underlying file input field */ 'fileselected',/** * @event clearvalue * Fires when the clear value trigger is clicked * @param {Ext.ux.form.FileUploadField} * @param {String} the value will be cleared */'clearvalue' ); },//overrideonRender : function(ct, position){Ext.ux.form.FileUploadField.superclass.onRender.call(this,ct,position);this.fileField = Ext.getDom(this.fileFieldId);this.fileFieldWrap = Ext.get('wrap' + this.fileFieldId);this.initSelectorStyle();//init toolTipif(this.toolTip){this.toolTip = new Ext.ToolTip({target:this.getEl(),autoHide:true,anchor: 'bottom',showDelay:100,anchorToTarget:true,trackMouse: true,renderTo: document.body,html:'',listeners: { scope:this,'beforeshow': function(tip) {tip.body.dom.innerHTML = this.getValue();},'show': function(tip){if(tip.body.dom.innerHTML.trim() == '' || !this.toolTip){tip.hide();}}}});}},//init events initEvents : function(){Ext.ux.form.FileUploadField.superclass.initEvents.call(this);Ext.get(this.fileField).on('change',function(){this.setValue(this.fileField.value);if(this.fireEvent('fileselected',this,this.fileField.value) !== false && this.enableClearValue){this.triggers[0].show();}},this);},//clear value by click clear value triggerclearValue : function(){var v = this.fileField.value || this.getValue();Ext.get(this.fileField).remove();this.fileField = Ext.DomHelper.append(this.fileFieldWrap, {tag: "input",name: this.fileFieldName,type: "file",cls: "ux-file",id: this.fileFieldId},false);//rebind event on the new fileFieldExt.get(this.fileField).on('change',function(){this.setValue(this.fileField.value);if(this.fireEvent('fileselected',this,this.fileField.value) !== false && this.enableClearValue){this.triggers[0].show();}},this);this.initSelectorStyle();this.setValue('');this.triggers[0].hide();this.fireEvent('clearvalue', this, v); },validateFileTypes :function(){ var filePath = this.fileField.value;var currentFilePrefix = filePath.substring(filePath.lastIndexOf('.') + 1);alert(currentFilePrefix); },//override reset : function(){ Ext.ux.form.FileUploadField.superclass.reset.call(this); if(this.fileField){this.clearValue();} },//init the trigger2 styleinitSelectorStyle : function(){Ext.get(this.fileField).setOpacity(0);this.fileFieldWrap.alignTo(Ext.get('triger-search' + this.fileFieldId),'tl?');},//prevent trigger hidden when set readOnly = true updateEditState: function(){ if(this.rendered){ if (this.readOnly) { this.el.dom.readOnly = true; this.el.addClass('x-trigger-noedit'); this.mun(this.el, 'click', this.onTriggerClick, this); } else { if (!this.editable) { this.el.dom.readOnly = true; this.el.addClass('x-trigger-noedit'); this.mon(this.el, 'click', this.onTriggerClick, this); } else { this.el.dom.readOnly = false; this.el.removeClass('x-trigger-noedit'); this.mun(this.el, 'click', this.onTriggerClick, this); } this.trigger.setDisplayed(!this.hideTrigger); } this.onResize(this.width || this.wrap.getWidth()); } }, // private onDestroy: function(){ Ext.ux.form.FileUploadField.superclass.onDestroy.call(this); Ext.destroy(this.fileField, this.fileFieldWrap); }, onDisable: function(){ Ext.ux.form.FileUploadField.superclass.onDisable.call(this); this.doDisable(true); },onEnable: function(){ Ext.ux.form.FileUploadField.superclass.onEnable.call(this); this.doDisable(false); }, // private doDisable: function(disabled){ this.fileField.disabled = disabled; }});/*** customized vtype for validate file types when upload***/Ext.apply(Ext.form.VTypes, { fileType : function(val, field){ var filePath = field.fileField.value;var currentFilePrefix = filePath.substring(filePath.lastIndexOf('.') + 1); if(field.fileTypes.length > 0 && !Ext.isEmpty(filePath)){var temp = [];for(var i=0;i<field.fileTypes.length;i++){temp[field.fileTypes[i].toLowerCase()] = true;}if(!temp[currentFilePrefix.toLowerCase()]){return false;} } return true; }, fileTypeText:'上传文件的格式不符合要求,请重新选择后再上传!'});Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);.x-form-search-trigger {background-image: url(../images/default/form/search-trigger.gif);}.x-form-field-wrap .x-form-clear-trigger { background-image: url(../images/default/form/clear-trigger.gif);}.ux-cabinet {position: relative;}.ux-input-file-wrapper {position: absolute;display: block;height: 22px;width: 18px;border:none;overflow: hidden;}.ux-file {position: absolute;height: 22px;width: auto;right: 0px;opacity: 0;-moz-opacity: 0;}