ExtJs文件上传(Ext.ux.form.FileUploadField)

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

转载于:https://www.cnblogs.com/hongwz/p/5317255.html