+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
/**
- * @class Ext.form.field.File
- * @extends Ext.form.field.Text
-
-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.
-{@img Ext.form.File/Ext.form.File.png Ext.form.File component}
-#Example Usage:#
-
- 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.');
- }
- });
- }
- }
- }]
- });
-
- * @constructor
- * Create a new File field
- * @param {Object} config Configuration options
- * @xtype filefield
- * @markdown
* @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.Text',
uses: ['Ext.button.Button', 'Ext.layout.component.field.File'],
/**
- * @cfg {String} buttonText The button text to display on the upload button (defaults to
- * 'Browse...'). Note that if you supply a value for {@link #buttonConfig}, the buttonConfig.text
- * value will be used instead if available.
+ * @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...',
/**
- * @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 Text members will still be available.
+ * @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,
/**
- * @cfg {Number} buttonMargin 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.
+ * @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,
/**
- * @cfg {Object} buttonConfig A standard {@link Ext.button.Button} config object.
+ * @cfg {Object} buttonConfig
+ * A standard {@link Ext.button.Button} config object.
*/
/**
* @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.
+ * 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
*/
/**
- * @property fileInputEl
- * @type {Ext.core.Element}
- * A reference to the invisible file input element created for this upload field. Only
- * populated after this component is rendered.
+ * @property {Ext.Element} fileInputEl
+ * A reference to the invisible file input element created for this upload field. Only populated after this
+ * component is rendered.
*/
/**
- * @property button
- * @type {Ext.button.Button}
- * A reference to the trigger Button component created for this upload field. Only
- * populated after this component is rendered.
+ * @property {Ext.button.Button} button
+ * A reference to the trigger Button component created for this upload field. Only populated after this component is
+ * rendered.
*/
/**
- * @cfg {String} fieldBodyCls
+ * @cfg {String} [fieldBodyCls='x-form-file-wrap']
* An extra CSS class to be applied to the body content element in addition to {@link #fieldBodyCls}.
- * Defaults to 'x-form-file-wrap' for file upload field.
*/
fieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
+ /**
+ * @cfg {Boolean} readOnly
+ * Unlike with other form fields, the readOnly config defaults to true in File field.
+ */
+ readOnly: true,
// private
- readOnly: true,
componentLayout: 'filefield',
// private
createButton: function() {
var me = this;
me.button = Ext.widget('button', Ext.apply({
+ ui: me.ui,
renderTo: me.bodyEl,
text: me.buttonText,
cls: Ext.baseCSSPrefix + 'form-file-btn',
setValue: Ext.emptyFn,
reset : function(){
- this.fileInputEl.remove();
- this.createFileInput();
- this.callParent();
+ var me = this;
+ if (me.rendered) {
+ me.fileInputEl.remove();
+ me.createFileInput();
+ me.inputEl.dom.value = '';
+ }
+ me.callParent();
},
onDisable: function(){
});
+
git.ithinksw.org / extjs.git / blobdiff