Button pressed and hover effect on Ext.Image

[francorobles]

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]

What framework and version so I can move this thread to the appropriate forum?

[francorobles]

I'm currently using 4.0.7.

[mitchellsimoens]

Moved into the appropriate forum for you.