PDA

View Full Version : Ext.form.FileUploadField extend in ext 2.2



SeekerGu
18 Aug 2008, 5:40 PM
HI,All.I would like to extend Ext.form.FileUploadField, new file upload size limit, and file type restrictions. What we have to do.

Ext.form.FileUploadField code:

/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected] ([email protected])
*
* http://extjs.com/license (http://extjs.com/license)
*/

Ext.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 ({@link) #buttonCfg}, the buttonCfg.text
* value will be used instead if available.
*/
buttonText: 'Browse...',
/**
* @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 ({@link) #buttonOnly} = false.
*/
buttonOffset: 3,
/**
* @cfg {Object} buttonCfg A standard {@link ({@link) Ext.Button} config object.
*/
// private
readOnly: true,

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

// private
initComponent: function(){
Ext.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 {Ext.form.FileUploadField} this
* @param {String} value The file value returned by the underlying file input field
*/
'fileselected'
);
},

// private
onRender : function(ct, position){
Ext.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.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1
});

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.fileInput.on('change', function(){
var v = this.fileInput.dom.value;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}, this);
},

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

// private
onResize : function(w, h){
Ext.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
preFocus : Ext.emptyFn,

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

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

nirmaljoseph
20 Jun 2012, 1:03 AM
How to select multiple files for upload with the same code?