examples/ux/fileuploadfield/FileUploadField.js

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