ext 文件输入域控件

直接上代码：

/**
 * 文件输入域控件

    ext 3.0.0
 * 说明:实现了多个文件输入域的自由增删,并带有文件格式,及文件名长度验证功能

 * 使用方法：
 * <div align="left" id="div_bid_affix"></div>
 * new Ext.form.InputField({
            renderTo : 'div_bid_affix',
            inputId : 'inData.accessory',
            alone :true
        });
 * @version 1.0
 * @author DuanYong
 * @since 2010-11-15
 * @class Ext.form.InputField
 * @extends Ext.BoxComponent
 */
Ext.form.InputField = Ext.extend(Ext.BoxComponent,  {
    'renderTo':'',//组件渲染ID,必填
    'inputId':'',//生成的文件输入框的name和id,必填
    'addBtnTitle':'',//添加按钮的名称
    'types':['txt','pdf','doc','xls','docx','rar','zip','ppt'],//允许的上传类型,数组
    'maxFileNameLength':40,//允许的文件名称总长度，默认40
    'alone':false,//是否是单个控件，默认多控件
    'inputWidth':300,//文件输入框的长度，默认300
    'inputHeight':25,//文件输入框的高度，默认25
    initComponent : function(){
        Ext.form.InputField.superclass.initComponent.call(this);
        this.rootDiv = Ext.getDom(this.renderTo);
    },
    onRender : function(ct, position){
         Ext.form.InputField.superclass.onRender.call(this, ct, position);
         if(!this.alone){
             this.initBtn();
         }
         this.createInput();
    },
    //private
    /**
     * 初始化按钮
     */
    initBtn : function(){
        var owner = this;
        var addBtn=document.createElement("input");
        addBtn.type="button";
        addBtn.value=" + "+this.addBtnTitle || '添加';
        addBtn.onclick = function(){ owner.createInput()};
        this.addButtonStyle(addBtn);
        this.rootDiv.appendChild(addBtn);
    },
    //private
    /**
     * 删除文件输入框
     * @param {} DelDivID 待删除文件输入框ID
     */
    removeInput : function(DelDivID){
         this.rootDiv.removeChild(Ext.getDom(DelDivID));
    },
    //private
    /**
     * 创建一个文件输入框
     */
    createInput : function(){
        var owner = this;
        var x=parseInt(Math.random()*(80-1))+1;
        var divName=this.inputId+x.toString();//随机div容器的名称
        var div = document.createElement("div");
        div.name=divName;
        div.id=divName;
        //创建一个文件输入域
        var aElement = document.createElement("input");
        aElement.name=this.inputId;
        aElement.id=this.inputId;
        aElement.type="file";//设置类型为file
        aElement.className = "inputFile";
        //aElement.setAttribute("style","width:"+this.inputWidth+"px;height:"+this.inputHeight+"px");
        //aElement.setAttribute("size",50);
        aElement.width = this.inputWidth;
        aElement.height = this.inputHeight;
        aElement.onkeydown=function(){return false;};
        aElement.onpaste=function(){return false;};
        aElement.onchange=function(){
            if(!Ext.isEmpty(this.value.replace(/\s*/g,""),false) && !owner.validate(this.value)){
                owner.removeInput(divName);
                owner.createInput();
            }
        };
        div.appendChild(aElement);//将input file加入div容器
        if(!this.alone){
            //创建一个删除按钮
            var delBtn=document.createElement("input");
            delBtn.type="button";
            delBtn.value=" - 删除";
            delBtn.height = this.inputHeight;
            delBtn.onclick=function(){ owner.removeInput(divName)};
            this.addButtonStyle(delBtn);
            div.appendChild(delBtn);//将删除按钮加入div容器
        }
        this.rootDiv.appendChild(div);//将div容器加入父元素
    },
    //private
    /**
     * 取得文件类型
     * 说明：如果文件路径不为空，则返回文件类型，否则返回空
     * @param {} filePath 文件路径
     * @return {String} 文件类型
     */
    getFileType: function(filePath){
        if(!Ext.isEmpty(filePath,false)){
            return filePath.substring(filePath.lastIndexOf('.')+1,filePath.length);
        }
        return '';
    },
    //private
    /**
     * 取得文件名长度
     * 说明：如果文件路径不为空，则返回文件长度，否则返0
     * @param {} filePath 文件路径
     * @return {String} 文件类型
     */
    getFileNameLength: function(filePath){
        if(!Ext.isEmpty(filePath,false)){
            return filePath.length - filePath.lastIndexOf("\\") - 1;
        }
        return 0;
    },
    //private
    /**
     * 文件格式校验
     * @param {} filePath 文件路径
     * 说明：如果指定了文件格式则校验之，否则返回true
     * @return {Boolean} 是否在文件指定的格式中
     */
    validate : function(filePath){
        //文件名长度校验
        if(!this.checkFileNameLength(filePath)){
            Msg.error('错误信息提示','文件名称总长度超过:'+this.maxFileNameLength);
            return false;
        }
        //文件格式校验
        if(!this.checkFileType(this.getFileType(filePath))){
            Msg.error('错误信息提示','文件类型不正确,允许的文件类型为:'+this.types);
            return false;
        }
        return true;
    },
    //private
    /**
     * 文件格式校验
     * 说明：如果指定了文件格式则校验之
     * @return {Boolean} 是否在文件指定的格式中,存在返回true
     */
    checkFileType : function(fileType){
        if(this.types){
            var haveType = false;
            for(var i=0;i<this.types.length;i++){
                if(this.types[i].toUpperCase() == fileType.toUpperCase()){
                    haveType = true;
                    break;
                }
            }
            return haveType;
        }
        return true;
    }
    ,
    //private
    /**
     * 文件名长度校验
     * 说明：如果指定了文件名长度则校验
     * @return {Boolean} 未超过指定长度 返回TRUE
     */
    checkFileNameLength : function(filePath){
        if(this.maxFileNameLength){
            return this.getFileNameLength(filePath) <= this.maxFileNameLength ? true : false
        }
        return true;
    }
    ,
    //private
    /**
     * 给按钮添加样式
     * 说明：给按钮添加样式
     * @param {} btn 按钮
     */
    addButtonStyle : function(btn){
        btn.className = 'inputFileBtn_mouseout';
        btn.onmouseover = function(){ btn.className = 'inputFileBtn_mouseover';};
        btn.onmouseout = function(){ btn.className = 'inputFileBtn_mouseout';};
        btn.onmousedown = function(){ btn.className = 'inputFileBtn_mousedown';};
        btn.onmouseup = function(){ btn.className = 'inputFileBtn_mouseup';};
    }
   
   
});
//注册xtype
Ext.reg('inputField', Ext.form.InputField);