docs/source/File.html

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