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