X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..refs/heads/master:/docs/source/File.html diff --git a/docs/source/File.html b/docs/source/File.html index 33dce20f..3f6d89b2 100644 --- a/docs/source/File.html +++ b/docs/source/File.html @@ -3,8 +3,8 @@ The source code - - + + @@ -16,57 +16,57 @@
/**
- * @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 <jason@sencha.com>
+ * @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',
@@ -75,60 +75,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
@@ -161,6 +165,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',
@@ -201,9 +206,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(){