PDA

View Full Version : FileUploadField mouseover button



zombeerose
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?

Thanks

mystix
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.

zombeerose
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


this.fileInput.on({
change: {scope:this, fn:function(){
var v = this.fileInput.dom.value;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}}
,mouseover: {scope:this, fn:function(){
this.button.getEl().addClass('x-btn-over');
}}
,mouseout: {scope:this, fn:function(){
this.button.getEl().removeClass('x-btn-over');
}}
});
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();
console.log('render',this.text,this,el);
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
});
w.show();