FileUploadField with Button mouseover / mouseout / mousedown behavior

[fabrizim]

Hi All-

The FileUploadField is a good addition to the library. My only problem with it is that the button does not behave as expected with mouse[over|out|down|up] events. So, I copied a few functions from Ext.Button and massaged their code a bit for correct element references. Seems to work fine for me in FF3, IE7, Chrome - haven't tested anything else yet.

I only tested with the basic example provided with the release, but everything seems to be working.



/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*
* Additional modifications for more "button-like" behavior added by Mark Fabrizio Jr. (fabrizim)
*/


Ext.form.FileUploadField = Ext.extend(Ext.form.TextField, {
/**
* @cfg {String} buttonText The button text to display on the upload button (defaults to
* 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
* value will be used instead if available.
*/
buttonText: 'Browse...',
/**
* @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
* text field (defaults to false). If true, all inherited TextField members will still be available.
*/
buttonOnly: false,
/**
* @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
* (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
*/
buttonOffset: 3,
/**
* @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
*/

// private
readOnly: true,

/**
* @hide
* @method autoSize
*/
autoSize: Ext.emptyFn,

// private
initComponent: function(){
Ext.form.FileUploadField.superclass.initComponent.call(this);

this.addEvents(
/**
* @event fileselected
* Fires when the underlying file input field's value has changed from the user
* selecting a new file from the system file selection dialog.
* @param {Ext.form.FileUploadField} this
* @param {String} value The file value returned by the underlying file input field
*/
'fileselected'
);
},

// private
onRender : function(ct, position){
Ext.form.FileUploadField.superclass.onRender.call(this, ct, position);

this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
this.el.addClass('x-form-file-text');
this.el.dom.removeAttribute('name');

this.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1
});

var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
text: this.buttonText
});
this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo: this.wrap,
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
}));

if(this.buttonOnly){
this.el.hide();
this.wrap.setWidth(this.button.getEl().getWidth());
}

this.fileInput.on('change', function(){
var v = this.fileInput.dom.value;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}, this);

this.fileInput.on('mouseover', this.onMouseOver, this);
this.fileInput.on('mouseout', this.onMouseOut, this);
this.fileInput.on('mousedown', this.onMouseDown, this);
this.fileInput.on('mouseup', this.onMouseUp, this);
},

// private
onMouseOver : function(e){
if(!this.disabled){
this.button.el.addClass("x-btn-over");
this.fireEvent('mouseover', this, e);
}
},

// private
onMouseOut : function(e){
this.button.el.removeClass("x-btn-over");
this.fireEvent('mouseout', this, e);
},

// private
onMouseDown : function(e){
if(!this.disabled && e.button == 0){
this.button.el.addClass("x-btn-click");
Ext.getDoc().on('mouseup', this.onMouseUp, this);
}
},
// private
onMouseUp : function(e){
if(e.button == 0){
this.button.el.removeClass("x-btn-click");
Ext.getDoc().un('mouseup', this.onMouseUp, this);
}
},

// private
getFileInputId: function(){
return this.id+'-file';
},

// private
onResize : function(w, h){
Ext.form.FileUploadField.superclass.onResize.call(this, w, h);

this.wrap.setWidth(w);

if(!this.buttonOnly){
var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
this.el.setWidth(w);
}
},

// private
preFocus : Ext.emptyFn,

// private
getResizeEl : function(){
return this.wrap;
},

// private
getPositionEl : function(){
return this.wrap;
},

// private
alignErrorIcon : function(){
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
}

});
Ext.reg('fileuploadfield', Ext.form.FileUploadField);


Demo (http://owlwatch.com/examples/extjs/examples/form/file-upload.html)
Original (http://extjs.com/deploy/dev/examples/form/file-upload.html)

Any thoughts are welcome.

Best Regards-
Mark

[garraS]

Awesome! Thanks!

[tsourick]

Unfortunately, it seems not to work in IE 6.