docs/source/FileUploadField.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js">Ext.ns('Ext.ux.form');
   9
  10 <div id="cls-Ext.ux.form.FileUploadField"></div>/**
  11  * @class Ext.ux.form.FileUploadField
  12  * @extends Ext.form.TextField
  13  * Creates a file upload field.
  14  * @xtype fileuploadfield
  15  */
  16 Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
  17     <div id="cfg-Ext.ux.form.FileUploadField-buttonText"></div>/**
  18      * @cfg {String} buttonText The button text to display on the upload button (defaults to
  19      * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
  20      * value will be used instead if available.
  21      */
  22     buttonText: 'Browse...',
  23     <div id="cfg-Ext.ux.form.FileUploadField-buttonOnly"></div>/**
  24      * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
  25      * text field (defaults to false).  If true, all inherited TextField members will still be available.
  26      */
  27     buttonOnly: false,
  28     <div id="cfg-Ext.ux.form.FileUploadField-buttonOffset"></div>/**
  29      * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
  30      * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
  31      */
  32     buttonOffset: 3,
  33     <div id="cfg-Ext.ux.form.FileUploadField-buttonCfg"></div>/**
  34      * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
  35      */
  36
  37     // private
  38     readOnly: true,
  39
  40     <div id="method-Ext.ux.form.FileUploadField-autoSize"></div>/**
  41      * @hide
  42      * @method autoSize
  43      */
  44     autoSize: Ext.emptyFn,
  45
  46     // private
  47     initComponent: function(){
  48         Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
  49
  50         this.addEvents(
  51             <div id="event-Ext.ux.form.FileUploadField-fileselected"></div>/**
  52              * @event fileselected
  53              * Fires when the underlying file input field's value has changed from the user
  54              * selecting a new file from the system file selection dialog.
  55              * @param {Ext.ux.form.FileUploadField} this
  56              * @param {String} value The file value returned by the underlying file input field
  57              */
  58             'fileselected'
  59         );
  60     },
  61
  62     // private
  63     onRender : function(ct, position){
  64         Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
  65
  66         this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
  67         this.el.addClass('x-form-file-text');
  68         this.el.dom.removeAttribute('name');
  69         this.createFileInput();
  70
  71         var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
  72             text: this.buttonText
  73         });
  74         this.button = new Ext.Button(Ext.apply(btnCfg, {
  75             renderTo: this.wrap,
  76             cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
  77         }));
  78
  79         if(this.buttonOnly){
  80             this.el.hide();
  81             this.wrap.setWidth(this.button.getEl().getWidth());
  82         }
  83
  84         this.bindListeners();
  85         this.resizeEl = this.positionEl = this.wrap;
  86     },
  87
  88     bindListeners: function(){
  89         this.fileInput.on({
  90             scope: this,
  91             mouseenter: function() {
  92                 this.button.addClass(['x-btn-over','x-btn-focus'])
  93             },
  94             mouseleave: function(){
  95                 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
  96             },
  97             mousedown: function(){
  98                 this.button.addClass('x-btn-click')
  99             },
 100             mouseup: function(){
 101                 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
 102             },
 103             change: function(){
 104                 var v = this.fileInput.dom.value;
 105                 this.setValue(v);
 106                 this.fireEvent('fileselected', this, v);
 107             }
 108         });
 109     },
 110
 111     createFileInput : function() {
 112         this.fileInput = this.wrap.createChild({
 113             id: this.getFileInputId(),
 114             name: this.name||this.getId(),
 115             cls: 'x-form-file',
 116             tag: 'input',
 117             type: 'file',
 118             size: 1
 119         });
 120     },
 121
 122     reset : function(){
 123         this.fileInput.remove();
 124         this.createFileInput();
 125         this.bindListeners();
 126         Ext.ux.form.FileUploadField.superclass.reset.call(this);
 127     },
 128
 129     // private
 130     getFileInputId: function(){
 131         return this.id + '-file';
 132     },
 133
 134     // private
 135     onResize : function(w, h){
 136         Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
 137
 138         this.wrap.setWidth(w);
 139
 140         if(!this.buttonOnly){
 141             var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
 142             this.el.setWidth(w);
 143         }
 144     },
 145
 146     // private
 147     onDestroy: function(){
 148         Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
 149         Ext.destroy(this.fileInput, this.button, this.wrap);
 150     },
 151
 152     onDisable: function(){
 153         Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
 154         this.doDisable(true);
 155     },
 156
 157     onEnable: function(){
 158         Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
 159         this.doDisable(false);
 160
 161     },
 162
 163     // private
 164     doDisable: function(disabled){
 165         this.fileInput.dom.disabled = disabled;
 166         this.button.setDisabled(disabled);
 167     },
 168
 169
 170     // private
 171     preFocus : Ext.emptyFn,
 172
 173     // private
 174     alignErrorIcon : function(){
 175         this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
 176     }
 177
 178 });
 179
 180 Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
 181
 182 // backwards compat
 183 Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
 184 </pre>
 185 </body>
 186 </html>