Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
  /**
    * @cfg {String} buttonText The button text to display on the upload button (defaults to
    * 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
    * value will be used instead if available.
   */
  buttonText : '文件上传',
  /**
    * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
    * text field (defaults to false). If true, all inherited TextField members will still be available.
   */
  buttonOnly : false,
  /**
    * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
    * (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
   */
  buttonOffset : 3,
     /**
    * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
   */

  // private
  readOnly : true,

  /**
    * @hide
    * @method autoSize
    */
  autoSize : Ext.emptyFn,

  // private
  initComponent : function() {

            this.renderTo = this.applyTo || this.renderTo;
            delete this.applyTo;
            var oldel = Ext.fly(this.renderTo);

           if (oldel&&oldel.dom.type && oldel.dom.type == "file") {

        var id = oldel.dom.id;

       this.width = oldel.getWidth() || 200;
       Ext.apply(this, this.getConfig(oldel.dom));
       var parent = oldel.parent();
       oldel.remove();
                parent.dom.innerHTML='<div id="'+this.id + '-renderto'+'"></div>';
       this.renderTo = this.id + '-renderto';

          }

     Ext.ux.form.FileUploadField.superclass.initComponent.call(this          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 {XY.form.FileUploadField} this
            * @param {String} value The file value returned by the underlying file input field
           */
           'fileselected');
         },
         getConfig : function(dom) {
           return {
         // applyTo : dom.id,
        icoCls : dom.className
        //id : dom.id,
        //tabIndex : dom.tabIndex
       }
        },
        // private
    onRender : function(ct, position) {
        Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct,
                                position);

         this.wrap = this.el.wrap({
            cls : 'x-form-field-wrap x-form-file-wrap'
                  });  
                  this.el.addClass('x-form-file-text');
         this.el.dom.removeAttribute('name');
         this.createFileInput();

        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
           text : this.buttonText
        });
        this.button = new Ext.Button(Ext.apply(btnCfg, {
           renderTo : this.wrap,
           cls : 'x-form-file-btn'
                + (btnCfg.iconCls ? ' x-btn-icon' : '')
        }));

        if (this.buttonOnly) {
           this.el.hide();
             this.wrap.setWidth(this.button.getEl().getWidth());
        }

        this.bindListeners();
           this.resizeEl = this.positionEl = this.wrap;
        },

        bindListeners : function() {
           this.fileInput.on({
                 scope : this,
                 mouseenter : function() {
                 this.button.addClass(['x-btn-over',
                 'x-btn-focus'])
        },
        mouseleave : function() {
           this.button.removeClass(['x-btn-over',
                 'x-btn-focus', 'x-btn-click'])
        },
        mousedown : function() {
           this.button.addClass('x-btn-click')
        },
        mouseup : function() {
           this.button.removeClass(['x-btn-over',
                'x-btn-focus', 'x-btn-click'])
        },
        change : function() {
           var v = this.fileInput.dom.value;
           this.setValue(v);
           this.fireEvent('fileselected', this, v);
        }
         });
    },

    createFileInput : function() {
       this.fileInput = this.wrap.createChild({
            id : this.getFileInputId(),
            name : this.name || this.getId(),
            cls : 'x-form-file',
            tag : 'input',
            type : 'file',
            size : 1
       });
    },

    reset : function() {
       this.fileInput.remove();
       this.createFileInput();
       this.bindListeners();
    Ext.ux.form.FileUploadField.superclass.reset.call(this);
    },

    // private
    getFileInputId : function() {
       return this.id + '-file';
    },

    // private
    onResize : function(w, h) {
    Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);

    this.wrap.setWidth(w);

    if (!this.buttonOnly) {
           var w = this.wrap.getWidth()
           - this.button.getEl().getWidth()
           - this.buttonOffset;
          this.el.setWidth(w);
       }
   },

// private
   onDestroy : function() {
   Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
   Ext.destroy(this.fileInput, this.button, this.wrap);
        },

   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.fileInput.dom.disabled = disabled;
        this.button.setDisabled(disabled);
  },

  // private
  preFocus : Ext.emptyFn,

  // private
  alignErrorIcon : function() {
  this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
  }

});

Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

jsp页面的代码如下:
      <input id="attachFileInfo" name="attachFileInfo" type="file"/>
      注:Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
      fileuploadfield:为input中的id;

Ext.ux -----> XY

ExtJs文件上传(Ext.ux.form.FileUploadField)的更多相关文章

  1. 自定义ExtJS文件上传

    日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...

  2. struts2+extjs文件上传完整实现(攻克了上传中的各种问题)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...

  3. PHP+ExtJS 文件上传示例

    xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel ...

  4. Extjs文件上传问题总结

    本来文件上传是一个简单而常用的功能,但是,由于刚刚接触extjs,对extjs中的控件及其使用方法并不熟悉,导致本来一个很快就可以搞定的文件上传问题,弄了将近两天的时间.现将问题及解决办法发出来,供有 ...

  5. extjs文件上传

    EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html Ext文件上传: 例子用到的jar:   1.upload.js /* ...

  6. Extjs 文件上传

    function fromExcel(){ var dxjgdm_sel = Ext.get("dxjgdm").getValue(); var dxjglx_sel = Ext. ...

  7. js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

  8. Spring MVC 文件上传简单示例(form、ajax方式 )

    1.Form Upload SpringMVC 中,文件的上传是通过 MultipartResolver 实现的,所以要实现上传,只要注册相应的 MultipartResolver 即可. Multi ...

  9. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

随机推荐

  1. Bootstrap学习(一)

    Bootstrap就是对jQuery的一次再开发,所以jQuery脚本引用必须在bootstrap脚本之前. 链接:http://www.cnblogs.com/vvjiang/p/5189804.h ...

  2. 恶趣味小游戏 I'm hungry

    之前学算法的时候无聊做了个游戏放松放松,现在传到了github以免电脑坏了就永远丢失了... github地址:https://github.com/BenDanChen/IamHungry I am ...

  3. 20145206《Java程序设计》第10周学习总结

    20145206 <Java程序设计>第10周学习总结 博客学习内容总结 什么是网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定 ...

  4. DOM - EventListener 句柄操作

          <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  5. 与你相遇好幸运,mbview的mbtiles文件分析

    mbview是一个查看.mbtiles文件的本地程序. https://github.com/mapbox/mbview .mbtiles文件就是一个Sqlite文件,用Navicat Premium ...

  6. forEach 方法 (Array) (JavaScript)

    为数组中的每个元素执行指定操作. 语法 array1.forEach(callbackfn[, thisArg]) 参数 参数 定义 array1 必选.一个数组对象. callbackfn 必选.最 ...

  7. [LeetCode] Valid Parentheses

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  8. css2

    CSS 实现div宽度根据内容自适应 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. base64编码、解码的C语言实现

    转自:http://www.cnblogs.com/yejianfei/archive/2013/04/06/3002838.html base64是一种基于64个可打印字符来表示二进制数据的表示方法 ...

  10. Liferay 6.2 改造系列之四:重新整理Application添加页面默认提供的Portlet清单

    经过2.3两步后,剩余Portlet已经不多,添加Application页面如下: 将用不到的Portlet隐藏起来:11   Portal目录 (Portal Directory) 将内嵌Protl ...