docs/source/File.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-form-field-File'>/**
  19 </span> * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  20  *
  21  * A file upload field which has custom styling and allows control over the button text and other
  22  * features of {@link Ext.form.field.Text text fields} like {@link Ext.form.field.Text#emptyText empty text}.
  23  * It uses a hidden file input element behind the scenes to allow user selection of a file and to
  24  * perform the actual upload during {@link Ext.form.Basic#submit form submit}.
  25  *
  26  * Because there is no secure cross-browser way to programmatically set the value of a file input,
  27  * the standard Field `setValue` method is not implemented. The `{@link #getValue}` method will return
  28  * a value that is browser-dependent; some have just the file name, some have a full path, some use
  29  * a fake path.
  30  *
  31  * **IMPORTANT:** File uploads are not performed using normal 'Ajax' techniques; see the description for
  32  * {@link Ext.form.Basic#hasUpload} for details.
  33  *
  34  * # Example Usage
  35  *
  36  *     @example
  37  *     Ext.create('Ext.form.Panel', {
  38  *         title: 'Upload a Photo',
  39  *         width: 400,
  40  *         bodyPadding: 10,
  41  *         frame: true,
  42  *         renderTo: Ext.getBody(),
  43  *         items: [{
  44  *             xtype: 'filefield',
  45  *             name: 'photo',
  46  *             fieldLabel: 'Photo',
  47  *             labelWidth: 50,
  48  *             msgTarget: 'side',
  49  *             allowBlank: false,
  50  *             anchor: '100%',
  51  *             buttonText: 'Select Photo...'
  52  *         }],
  53  *
  54  *         buttons: [{
  55  *             text: 'Upload',
  56  *             handler: function() {
  57  *                 var form = this.up('form').getForm();
  58  *                 if(form.isValid()){
  59  *                     form.submit({
  60  *                         url: 'photo-upload.php',
  61  *                         waitMsg: 'Uploading your photo...',
  62  *                         success: function(fp, o) {
  63  *                             Ext.Msg.alert('Success', 'Your photo &quot;' + o.result.file + '&quot; has been uploaded.');
  64  *                         }
  65  *                     });
  66  *                 }
  67  *             }
  68  *         }]
  69  *     });
  70  */
  71 Ext.define(&quot;Ext.form.field.File&quot;, {
  72     extend: 'Ext.form.field.Text',
  73     alias: ['widget.filefield', 'widget.fileuploadfield'],
  74     alternateClassName: ['Ext.form.FileUploadField', 'Ext.ux.form.FileUploadField', 'Ext.form.File'],
  75     uses: ['Ext.button.Button', 'Ext.layout.component.field.File'],
  76
  77 <span id='Ext-form-field-File-cfg-buttonText'>    /**
  78 </span>     * @cfg {String} buttonText
  79      * The button text to display on the upload button. Note that if you supply a value for
  80      * {@link #buttonConfig}, the buttonConfig.text value will be used instead if available.
  81      */
  82     buttonText: 'Browse...',
  83
  84 <span id='Ext-form-field-File-cfg-buttonOnly'>    /**
  85 </span>     * @cfg {Boolean} buttonOnly
  86      * True to display the file upload field as a button with no visible text field. If true, all
  87      * inherited Text members will still be available.
  88      */
  89     buttonOnly: false,
  90
  91 <span id='Ext-form-field-File-cfg-buttonMargin'>    /**
  92 </span>     * @cfg {Number} buttonMargin
  93      * The number of pixels of space reserved between the button and the text field. Note that this only
  94      * applies if {@link #buttonOnly} = false.
  95      */
  96     buttonMargin: 3,
  97
  98 <span id='Ext-form-field-File-cfg-buttonConfig'>    /**
  99 </span>     * @cfg {Object} buttonConfig
 100      * A standard {@link Ext.button.Button} config object.
 101      */
 102
 103 <span id='Ext-form-field-File-event-change'>    /**
 104 </span>     * @event change
 105      * Fires when the underlying file input field's value has changed from the user selecting a new file from the system
 106      * file selection dialog.
 107      * @param {Ext.ux.form.FileUploadField} this
 108      * @param {String} value The file value returned by the underlying file input field
 109      */
 110
 111 <span id='Ext-form-field-File-property-fileInputEl'>    /**
 112 </span>     * @property {Ext.Element} fileInputEl
 113      * A reference to the invisible file input element created for this upload field. Only populated after this
 114      * component is rendered.
 115      */
 116
 117 <span id='Ext-form-field-File-property-button'>    /**
 118 </span>     * @property {Ext.button.Button} button
 119      * A reference to the trigger Button component created for this upload field. Only populated after this component is
 120      * rendered.
 121      */
 122
 123 <span id='Ext-form-field-File-cfg-fieldBodyCls'>    /**
 124 </span>     * @cfg {String} [fieldBodyCls='x-form-file-wrap']
 125      * An extra CSS class to be applied to the body content element in addition to {@link #fieldBodyCls}.
 126      */
 127     fieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
 128
 129 <span id='Ext-form-field-File-cfg-readOnly'>    /**
 130 </span>     * @cfg {Boolean} readOnly
 131      * Unlike with other form fields, the readOnly config defaults to true in File field.
 132      */
 133     readOnly: true,
 134
 135     // private
 136     componentLayout: 'filefield',
 137
 138     // private
 139     onRender: function() {
 140         var me = this,
 141             inputEl;
 142
 143         me.callParent(arguments);
 144
 145         me.createButton();
 146         me.createFileInput();
 147
 148         // we don't create the file/button til after onRender, the initial disable() is
 149         // called in the onRender of the component.
 150         if (me.disabled) {
 151             me.disableItems();
 152         }
 153
 154         inputEl = me.inputEl;
 155         inputEl.dom.removeAttribute('name'); //name goes on the fileInput, not the text input
 156         if (me.buttonOnly) {
 157             inputEl.setDisplayed(false);
 158         }
 159     },
 160
 161 <span id='Ext-form-field-File-method-createButton'>    /**
 162 </span>     * @private
 163      * Creates the custom trigger Button component. The fileInput will be inserted into this.
 164      */
 165     createButton: function() {
 166         var me = this;
 167         me.button = Ext.widget('button', Ext.apply({
 168             ui: me.ui,
 169             renderTo: me.bodyEl,
 170             text: me.buttonText,
 171             cls: Ext.baseCSSPrefix + 'form-file-btn',
 172             preventDefault: false,
 173             style: me.buttonOnly ? '' : 'margin-left:' + me.buttonMargin + 'px'
 174         }, me.buttonConfig));
 175     },
 176
 177 <span id='Ext-form-field-File-method-createFileInput'>    /**
 178 </span>     * @private
 179      * Creates the file input element. It is inserted into the trigger button component, made
 180      * invisible, and floated on top of the button's other content so that it will receive the
 181      * button's clicks.
 182      */
 183     createFileInput : function() {
 184         var me = this;
 185         me.fileInputEl = me.button.el.createChild({
 186             name: me.getName(),
 187             cls: Ext.baseCSSPrefix + 'form-file-input',
 188             tag: 'input',
 189             type: 'file',
 190             size: 1
 191         }).on('change', me.onFileChange, me);
 192     },
 193
 194 <span id='Ext-form-field-File-method-onFileChange'>    /**
 195 </span>     * @private Event handler fired when the user selects a file.
 196      */
 197     onFileChange: function() {
 198         this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
 199         Ext.form.field.File.superclass.setValue.call(this, this.fileInputEl.dom.value);
 200     },
 201
 202 <span id='Ext-form-field-File-property-setValue'>    /**
 203 </span>     * Overridden to do nothing
 204      * @hide
 205      */
 206     setValue: Ext.emptyFn,
 207
 208     reset : function(){
 209         var me = this;
 210         if (me.rendered) {
 211             me.fileInputEl.remove();
 212             me.createFileInput();
 213             me.inputEl.dom.value = '';
 214         }
 215         me.callParent();
 216     },
 217
 218     onDisable: function(){
 219         this.callParent();
 220         this.disableItems();
 221     },
 222
 223     disableItems: function(){
 224         var file = this.fileInputEl,
 225             button = this.button;
 226
 227         if (file) {
 228             file.dom.disabled = true;
 229         }
 230         if (button) {
 231             button.disable();
 232         }
 233     },
 234
 235     onEnable: function(){
 236         var me = this;
 237         me.callParent();
 238         me.fileInputEl.dom.disabled = false;
 239         me.button.enable();
 240     },
 241
 242     isFileUpload: function() {
 243         return true;
 244     },
 245
 246     extractFileInput: function() {
 247         var fileInput = this.fileInputEl.dom;
 248         this.reset();
 249         return fileInput;
 250     },
 251
 252     onDestroy: function(){
 253         Ext.destroyMembers(this, 'fileInputEl', 'button');
 254         this.callParent();
 255     }
 256
 257
 258 });
 259 </pre>
 260 </body>
 261 </html>