examples/form/FileUploadField.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 \r
  10 Ext.form.FileUploadField = Ext.extend(Ext.form.TextField,  {\r
  11     /**\r
  12      * @cfg {String} buttonText The button text to display on the upload button (defaults to\r
  13      * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text\r
  14      * value will be used instead if available.\r
  15      */\r
  16     buttonText: 'Browse...',\r
  17     /**\r
  18      * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible\r
  19      * text field (defaults to false).  If true, all inherited TextField members will still be available.\r
  20      */\r
  21     buttonOnly: false,\r
  22     /**\r
  23      * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field\r
  24      * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.\r
  25      */\r
  26     buttonOffset: 3,\r
  27     /**\r
  28      * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.\r
  29      */\r
  30 \r
  31     // private\r
  32     readOnly: true,\r
  33     \r
  34     /**\r
  35      * @hide \r
  36      * @method autoSize\r
  37      */\r
  38     autoSize: Ext.emptyFn,\r
  39     \r
  40     // private\r
  41     initComponent: function(){\r
  42         Ext.form.FileUploadField.superclass.initComponent.call(this);\r
  43         \r
  44         this.addEvents(\r
  45             /**\r
  46              * @event fileselected\r
  47              * Fires when the underlying file input field's value has changed from the user\r
  48              * selecting a new file from the system file selection dialog.\r
  49              * @param {Ext.form.FileUploadField} this\r
  50              * @param {String} value The file value returned by the underlying file input field\r
  51              */\r
  52             'fileselected'\r
  53         );\r
  54     },\r
  55     \r
  56     // private\r
  57     onRender : function(ct, position){\r
  58         Ext.form.FileUploadField.superclass.onRender.call(this, ct, position);\r
  59         \r
  60         this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});\r
  61         this.el.addClass('x-form-file-text');\r
  62         this.el.dom.removeAttribute('name');\r
  63         \r
  64         this.fileInput = this.wrap.createChild({\r
  65             id: this.getFileInputId(),\r
  66             name: this.name||this.getId(),\r
  67             cls: 'x-form-file',\r
  68             tag: 'input', \r
  69             type: 'file',\r
  70             size: 1\r
  71         });\r
  72         \r
  73         var btnCfg = Ext.applyIf(this.buttonCfg || {}, {\r
  74             text: this.buttonText\r
  75         });\r
  76         this.button = new Ext.Button(Ext.apply(btnCfg, {\r
  77             renderTo: this.wrap,\r
  78             cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')\r
  79         }));\r
  80         \r
  81         if(this.buttonOnly){\r
  82             this.el.hide();\r
  83             this.wrap.setWidth(this.button.getEl().getWidth());\r
  84         }\r
  85         \r
  86         this.fileInput.on('change', function(){\r
  87             var v = this.fileInput.dom.value;\r
  88             this.setValue(v);\r
  89             this.fireEvent('fileselected', this, v);\r
  90         }, this);\r
  91     },\r
  92     \r
  93     // private\r
  94     getFileInputId: function(){\r
  95         return this.id+'-file';\r
  96     },\r
  97     \r
  98     // private\r
  99     onResize : function(w, h){\r
 100         Ext.form.FileUploadField.superclass.onResize.call(this, w, h);\r
 101         \r
 102         this.wrap.setWidth(w);\r
 103         \r
 104         if(!this.buttonOnly){\r
 105             var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;\r
 106             this.el.setWidth(w);\r
 107         }\r
 108     },\r
 109     \r
 110     // private\r
 111     preFocus : Ext.emptyFn,\r
 112     \r
 113     // private\r
 114     getResizeEl : function(){\r
 115         return this.wrap;\r
 116     },\r
 117 \r
 118     // private\r
 119     getPositionEl : function(){\r
 120         return this.wrap;\r
 121     },\r
 122 \r
 123     // private\r
 124     alignErrorIcon : function(){\r
 125         this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);\r
 126     }\r
 127     \r
 128 });\r
 129 Ext.reg('fileuploadfield', Ext.form.FileUploadField);