View Full Version : FileUploadField mouseover button

30 Jun 2009, 3:45 PM
Does anyone have a fix for the FileUploadField so that when you hover over the button, you get the visual effect of the color changing?


30 Jun 2009, 7:45 PM
i don't think that's possible at the moment.

even the fileupload field i saw over at quirksmode.org doesn't show any highlights on mouseover.

1 Jul 2009, 9:22 AM
Well it's not a perfect solution but it works in IE6 & FF2/3.

Here is the chunk of code that I replaced within the FileUploadField.js

change: {scope:this, fn:function(){
var v = this.fileInput.dom.value;
this.fireEvent('fileselected', this, v);
,mouseover: {scope:this, fn:function(){
,mouseout: {scope:this, fn:function(){
I tried to relay the events to the button but in my test case, I could only get the highlight to work when I hovered over the very top left pixel of the button. I am guessing that it might be related to the event not occurring within the button. I did not pursue this but if someone else wants to, try this code instead of the above addClass/removeClass...

this.button.on('render', function() {
this.button.el.relayEvents(this.fileInput, ['mouseover','mouseout']);
}, this, {delay: 10});
Here is my test case...

var onRender = function() {
var el = this.getEl();
el.on('mouseover',function() { console.log('mouseover',this) });

var w = new Ext.Window({
items: [{
value: 'spacing from the window'
,xtype: 'displayfield'
xtype: 'fileuploadfield'
,buttonOnly: true
,buttonCfg: {
text: 'File Upload'
,iconCls: 'x' //needed to be able to hover the top left pixel
,listeners: { render: onRender }
text: 'Ext Button'
,iconCls: 'x'
,listeners: {render: onRender}
,xtype: 'button'
,title: 'Test'
,width: 200
,height: 200