3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
10 * @class Ext.ux.form.FileUploadField
11 * @extends Ext.form.TextField
12 * Creates a file upload field.
13 * @xtype fileuploadfield
15 Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
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.
21 buttonText: 'Browse...',
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.
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.
33 * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
43 autoSize: Ext.emptyFn,
46 initComponent: function(){
47 Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
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
62 onRender : function(ct, position){
63 Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
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();
70 var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
73 this.button = new Ext.Button(Ext.apply(btnCfg, {
75 cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
80 this.wrap.setWidth(this.button.getEl().getWidth());
84 this.resizeEl = this.positionEl = this.wrap;
87 bindListeners: function(){
90 mouseenter: function() {
91 this.button.addClass(['x-btn-over','x-btn-focus'])
93 mouseleave: function(){
94 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
96 mousedown: function(){
97 this.button.addClass('x-btn-click')
100 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
103 var v = this.fileInput.dom.value;
105 this.fireEvent('fileselected', this, v);
110 createFileInput : function() {
111 this.fileInput = this.wrap.createChild({
112 id: this.getFileInputId(),
113 name: this.name||this.getId(),
122 this.fileInput.remove();
123 this.createFileInput();
124 this.bindListeners();
125 Ext.ux.form.FileUploadField.superclass.reset.call(this);
129 getFileInputId: function(){
130 return this.id + '-file';
134 onResize : function(w, h){
135 Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
137 this.wrap.setWidth(w);
139 if(!this.buttonOnly){
140 var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
146 onDestroy: function(){
147 Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
148 Ext.destroy(this.fileInput, this.button, this.wrap);
151 onDisable: function(){
152 Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
153 this.doDisable(true);
156 onEnable: function(){
157 Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
158 this.doDisable(false);
163 doDisable: function(disabled){
164 this.fileInput.dom.disabled = disabled;
165 this.button.setDisabled(disabled);
170 preFocus : Ext.emptyFn,
173 alignErrorIcon : function(){
174 this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
179 Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
182 Ext.form.FileUploadField = Ext.ux.form.FileUploadField;