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