PDA

View Full Version : Button pressed and hover effect on Ext.Image



francorobles
4 Jan 2012, 1:04 AM
Guys,

Here’s the easiest way on how to replicate Ext.Button click, hover and pressed effect on an image.

Instead of using click event replace it with 4 events (mousedown,mouseenter,mouseout, and mouseup):
Previous Code:
Id: ‘'myButton'’,
listeners : {
click: {
element: ‘el’,
fn : function() {
}
}
}

Current Code:
Id: ‘'myButton'’,
listeners: {
mousedown: {
element: 'el',
fn: function () {
Ext.getCmp('myButton').setSrc('/Images/btPressed.png');
}
},
mouseenter: {
element: 'el',
fn: function () {
Ext.getCmp('myButton').setSrc('/Images/btOver.png');
}
},
mouseout: {
element: 'el',
fn: function () {
Ext.getCmp('myButton').setSrc('/Images/btNormal.png');
}
},
mouseup: {
element: 'el',
fn: function () {
Ext.getCmp('myButton').setSrc('/Images/btNormal.png');
//Main code here that needs to be executed.
}
}
}

mitchellsimoens
4 Jan 2012, 6:43 AM
What framework and version so I can move this thread to the appropriate forum?

francorobles
4 Jan 2012, 4:30 PM
I'm currently using 4.0.7.

mitchellsimoens
5 Jan 2012, 5:42 AM
Moved into the appropriate forum for you.