146 lines
4.2 KiB
JavaScript
146 lines
4.2 KiB
JavaScript
|
/*!
|
||
|
|
* Ext JS Library 3.0.0
|
||
|
|
* Copyright(c) 2006-2009 Ext JS, LLC
|
||
|
|
* licensing@extjs.com
|
||
|
|
* http://www.extjs.com/license
|
||
|
|
*/
|
||
|
|
Ext.ns('Ext.ux.form');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @class Ext.ux.form.FileUploadField
|
||
|
|
* @extends Ext.form.TextField
|
||
|
|
* Creates a file upload field.
|
||
|
|
* @xtype 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: '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 #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(){
|
||
|
|
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 {Ext.ux.form.FileUploadField} this
|
||
|
|
* @param {String} value The file value returned by the underlying file input field
|
||
|
|
*/
|
||
|
|
'fileselected'
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
// 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.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.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);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
// 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.ux.form.FileUploadField);
|
||
|
|
|
||
|
|
// backwards compat
|
||
|
|
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
|