examples/docs/source/FileUploadField.html

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