<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-form-field-File'>/**
</span> * @docauthor Jason Johnston <jason@sencha.com>
*
* A file upload field which has custom styling and allows control over the button text and other
* features of {@link Ext.form.field.Text text fields} like {@link Ext.form.field.Text#emptyText empty text}.
* It uses a hidden file input element behind the scenes to allow user selection of a file and to
* perform the actual upload during {@link Ext.form.Basic#submit form submit}.
*
* Because there is no secure cross-browser way to programmatically set the value of a file input,
* the standard Field `setValue` method is not implemented. The `{@link #getValue}` method will return
* a value that is browser-dependent; some have just the file name, some have a full path, some use
* a fake path.
*
* **IMPORTANT:** File uploads are not performed using normal 'Ajax' techniques; see the description for
* {@link Ext.form.Basic#hasUpload} for details.
*
* # Example Usage
*
* @example
* Ext.create('Ext.form.Panel', {
* title: 'Upload a Photo',
* width: 400,
* bodyPadding: 10,
* frame: true,
* renderTo: Ext.getBody(),
* items: [{
* xtype: 'filefield',
* name: 'photo',
* fieldLabel: 'Photo',
* labelWidth: 50,
* msgTarget: 'side',
* allowBlank: false,
* anchor: '100%',
* buttonText: 'Select Photo...'
* }],
*
* buttons: [{
* text: 'Upload',
* handler: function() {
* var form = this.up('form').getForm();
* if(form.isValid()){
* form.submit({
* url: 'photo-upload.php',
* waitMsg: 'Uploading your photo...',
* success: function(fp, o) {
* Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
* }
* });
* }
* }
* }]
* });
*/
Ext.define("Ext.form.field.File", {
extend: 'Ext.form.field.Trigger',
alias: ['widget.filefield', 'widget.fileuploadfield'],
alternateClassName: ['Ext.form.FileUploadField', 'Ext.ux.form.FileUploadField', 'Ext.form.File'],
uses: ['Ext.button.Button', 'Ext.layout.component.field.Field'],
//<locale>
<span id='Ext-form-field-File-cfg-buttonText'> /**
</span> * @cfg {String} buttonText
* The button text to display on the upload button. Note that if you supply a value for
* {@link #buttonConfig}, the buttonConfig.text value will be used instead if available.
*/
buttonText: 'Browse...',
//</locale>
<span id='Ext-form-field-File-cfg-buttonOnly'> /**
</span> * @cfg {Boolean} buttonOnly
* True to display the file upload field as a button with no visible text field. If true, all
* inherited Text members will still be available.
*/
buttonOnly: false,
<span id='Ext-form-field-File-cfg-buttonMargin'> /**
</span> * @cfg {Number} buttonMargin
* The number of pixels of space reserved between the button and the text field. Note that this only
* applies if {@link #buttonOnly} = false.
*/
buttonMargin: 3,
<span id='Ext-form-field-File-cfg-buttonConfig'> /**
</span> * @cfg {Object} buttonConfig
* A standard {@link Ext.button.Button} config object.
*/
<span id='Ext-form-field-File-event-change'> /**
</span> * @event change
* 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
*/
<span id='Ext-form-field-File-property-fileInputEl'> /**
</span> * @property {Ext.Element} fileInputEl
* A reference to the invisible file input element created for this upload field. Only populated after this
* component is rendered.
*/
<span id='Ext-form-field-File-property-button'> /**
</span> * @property {Ext.button.Button} button
* A reference to the trigger Button component created for this upload field. Only populated after this component is
* rendered.
*/
<span id='Ext-form-field-File-cfg-fieldBodyCls'> /**
</span> * @cfg {String} [fieldBodyCls='x-form-file-wrap']
* An extra CSS class to be applied to the body content element in addition to {@link #fieldBodyCls}.
*/
fieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
<span id='Ext-form-field-File-cfg-readOnly'> /**
</span> * @cfg {Boolean} readOnly
* Unlike with other form fields, the readOnly config defaults to true in File field.
*/
readOnly: true,
<span id='Ext-form-field-File-property-triggerNoEditCls'> /**
</span> * Do not show hand pointer over text field since file choose dialog is only shown when clicking in the button
* @private
*/
triggerNoEditCls: '',
// private
componentLayout: 'triggerfield',
// private. Extract the file element, button outer element, and button active element.
childEls: ['fileInputEl', 'buttonEl', 'buttonEl-btnEl', 'browseButtonWrap'],
// private
onRender: function() {
var me = this,
inputEl;
me.callParent(arguments);
inputEl = me.inputEl;
inputEl.dom.name = ''; //name goes on the fileInput, not the text input
me.fileInputEl.dom.name = me.getName();
me.fileInputEl.on({
scope: me,
change: me.onFileChange
});
if (me.buttonOnly) {
me.inputCell.setDisplayed(false);
}
// Ensure the trigger cell is sized correctly upon render
me.browseButtonWrap.dom.style.width = (me.browseButtonWrap.dom.lastChild.offsetWidth + me.buttonEl.getMargin('lr')) + 'px';
if (Ext.isIE) {
me.buttonEl.repaint();
}
},
<span id='Ext-form-field-File-method-getTriggerMarkup'> /**
</span> * Gets the markup to be inserted into the subTplMarkup.
*/
getTriggerMarkup: function() {
var me = this,
result,
btn = Ext.widget('button', Ext.apply({
id: me.id + '-buttonEl',
ui: me.ui,
disabled: me.disabled,
text: me.buttonText,
cls: Ext.baseCSSPrefix + 'form-file-btn',
preventDefault: false,
style: me.buttonOnly ? '' : 'margin-left:' + me.buttonMargin + 'px'
}, me.buttonConfig)),
btnCfg = btn.getRenderTree(),
inputElCfg = {
id: me.id + '-fileInputEl',
cls: Ext.baseCSSPrefix + 'form-file-input',
tag: 'input',
type: 'file',
size: 1
};
if (me.disabled) {
inputElCfg.disabled = true;
}
btnCfg.cn = inputElCfg;
result = '<td id="' + me.id + '-browseButtonWrap">' + Ext.DomHelper.markup(btnCfg) + '</td>';
btn.destroy();
return result;
},
<span id='Ext-form-field-File-method-createFileInput'> /**
</span> * @private
* Creates the file input element. It is inserted into the trigger button component, made
* invisible, and floated on top of the button's other content so that it will receive the
* button's clicks.
*/
createFileInput : function() {
var me = this;
me.fileInputEl = me.buttonEl.createChild({
name: me.getName(),
id: me.id + '-fileInputEl',
cls: Ext.baseCSSPrefix + 'form-file-input',
tag: 'input',
type: 'file',
size: 1
});
me.fileInputEl.on({
scope: me,
change: me.onFileChange
});
},
<span id='Ext-form-field-File-method-onFileChange'> /**
</span> * @private Event handler fired when the user selects a file.
*/
onFileChange: function() {
this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
Ext.form.field.File.superclass.setValue.call(this, this.fileInputEl.dom.value);
},
<span id='Ext-form-field-File-method-setValue'> /**
</span> * Overridden to do nothing
* @method
*/
setValue: Ext.emptyFn,
reset : function(){
var me = this;
if (me.rendered) {
me.fileInputEl.remove();
me.createFileInput();
me.inputEl.dom.value = '';
}
me.callParent();
},
onDisable: function(){
this.callParent();
this.disableItems();
},
disableItems: function(){
var file = this.fileInputEl;
if (file) {
file.dom.disabled = true;
}
this['buttonEl-btnEl'].dom.disabled = true;
},
onEnable: function(){
var me = this;
me.callParent();
me.fileInputEl.dom.disabled = false;
this['buttonEl-btnEl'].dom.disabled = false;
},
isFileUpload: function() {
return true;
},
extractFileInput: function() {
var fileInput = this.fileInputEl.dom;
this.reset();
return fileInput;
},
onDestroy: function(){
Ext.destroyMembers(this, 'fileInputEl', 'buttonEl');
this.callParent();
}
});</pre>
</body>
</html>