X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..HEAD:/src/form/field/File.js diff --git a/src/form/field/File.js b/src/form/field/File.js index f6cbf678..01b8bfbe 100644 --- a/src/form/field/File.js +++ b/src/form/field/File.js @@ -13,57 +13,57 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @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.'); - } - }); - } - } - }] - }); - - * @markdown * @docauthor Jason Johnston + * + * 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', @@ -72,60 +72,64 @@ Ext.define("Ext.form.field.File", { 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 @@ -158,6 +162,7 @@ Ext.define("Ext.form.field.File", { 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', @@ -198,9 +203,13 @@ Ext.define("Ext.form.field.File", { 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(){