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-method-constructor'><span id='Ext-form-field-File'>/**
  19 </span></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  * @constructor
  69  * Create a new File field
  70  * @param {Object} config Configuration options
  71  * @xtype filefield
  72  * @markdown
  73  * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  74  */
  75 Ext.define(&quot;Ext.form.field.File&quot;, {
  76     extend: 'Ext.form.field.Text',
  77     alias: ['widget.filefield', 'widget.fileuploadfield'],
  78     alternateClassName: ['Ext.form.FileUploadField', 'Ext.ux.form.FileUploadField', 'Ext.form.File'],
  79     uses: ['Ext.button.Button', 'Ext.layout.component.field.File'],
  80
  81 <span id='Ext-form-field-File-cfg-buttonText'>    /**
  82 </span>     * @cfg {String} buttonText The button text to display on the upload button (defaults to
  83      * 'Browse...').  Note that if you supply a value for {@link #buttonConfig}, the buttonConfig.text
  84      * value will be used instead if available.
  85      */
  86     buttonText: 'Browse...',
  87
  88 <span id='Ext-form-field-File-cfg-buttonOnly'>    /**
  89 </span>     * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
  90      * text field (defaults to false).  If true, all inherited Text members will still be available.
  91      */
  92     buttonOnly: false,
  93
  94 <span id='Ext-form-field-File-cfg-buttonMargin'>    /**
  95 </span>     * @cfg {Number} buttonMargin The number of pixels of space reserved between the button and the text field
  96      * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
  97      */
  98     buttonMargin: 3,
  99
 100 <span id='Ext-form-field-File-cfg-buttonConfig'>    /**
 101 </span>     * @cfg {Object} buttonConfig A standard {@link Ext.button.Button} config object.
 102      */
 103
 104 <span id='Ext-form-field-File-event-change'>    /**
 105 </span>     * @event change
 106      * Fires when the underlying file input field's value has changed from the user
 107      * selecting a new file from the system file selection dialog.
 108      * @param {Ext.ux.form.FileUploadField} this
 109      * @param {String} value The file value returned by the underlying file input field
 110      */
 111
 112 <span id='Ext-form-field-File-property-fileInputEl'>    /**
 113 </span>     * @property fileInputEl
 114      * @type {Ext.core.Element}
 115      * A reference to the invisible file input element created for this upload field. Only
 116      * populated after this component is rendered.
 117      */
 118
 119 <span id='Ext-form-field-File-property-button'>    /**
 120 </span>     * @property button
 121      * @type {Ext.button.Button}
 122      * A reference to the trigger Button component created for this upload field. Only
 123      * populated after this component is rendered.
 124      */
 125
 126 <span id='Ext-form-field-File-cfg-fieldBodyCls'>    /**
 127 </span>     * @cfg {String} fieldBodyCls
 128      * An extra CSS class to be applied to the body content element in addition to {@link #fieldBodyCls}.
 129      * Defaults to 'x-form-file-wrap' for file upload field.
 130      */
 131     fieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
 132
 133
 134     // private
 135     readOnly: true,
 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             renderTo: me.bodyEl,
 169             text: me.buttonText,
 170             cls: Ext.baseCSSPrefix + 'form-file-btn',
 171             preventDefault: false,
 172             style: me.buttonOnly ? '' : 'margin-left:' + me.buttonMargin + 'px'
 173         }, me.buttonConfig));
 174     },
 175
 176 <span id='Ext-form-field-File-method-createFileInput'>    /**
 177 </span>     * @private
 178      * Creates the file input element. It is inserted into the trigger button component, made
 179      * invisible, and floated on top of the button's other content so that it will receive the
 180      * button's clicks.
 181      */
 182     createFileInput : function() {
 183         var me = this;
 184         me.fileInputEl = me.button.el.createChild({
 185             name: me.getName(),
 186             cls: Ext.baseCSSPrefix + 'form-file-input',
 187             tag: 'input',
 188             type: 'file',
 189             size: 1
 190         }).on('change', me.onFileChange, me);
 191     },
 192
 193 <span id='Ext-form-field-File-method-onFileChange'>    /**
 194 </span>     * @private Event handler fired when the user selects a file.
 195      */
 196     onFileChange: function() {
 197         this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
 198         Ext.form.field.File.superclass.setValue.call(this, this.fileInputEl.dom.value);
 199     },
 200
 201 <span id='Ext-form-field-File-property-setValue'>    /**
 202 </span>     * Overridden to do nothing
 203      * @hide
 204      */
 205     setValue: Ext.emptyFn,
 206
 207     reset : function(){
 208         this.fileInputEl.remove();
 209         this.createFileInput();
 210         this.callParent();
 211     },
 212
 213     onDisable: function(){
 214         this.callParent();
 215         this.disableItems();
 216     },
 217
 218     disableItems: function(){
 219         var file = this.fileInputEl,
 220             button = this.button;
 221
 222         if (file) {
 223             file.dom.disabled = true;
 224         }
 225         if (button) {
 226             button.disable();
 227         }
 228     },
 229
 230     onEnable: function(){
 231         var me = this;
 232         me.callParent();
 233         me.fileInputEl.dom.disabled = false;
 234         me.button.enable();
 235     },
 236
 237     isFileUpload: function() {
 238         return true;
 239     },
 240
 241     extractFileInput: function() {
 242         var fileInput = this.fileInputEl.dom;
 243         this.reset();
 244         return fileInput;
 245     },
 246
 247     onDestroy: function(){
 248         Ext.destroyMembers(this, 'fileInputEl', 'button');
 249         this.callParent();
 250     }
 251
 252
 253 });
 254 </pre>
 255 </body>
 256 </html>