PDA

View Full Version : Change icon in actioncolumn when mouseover this icon



earist
14 Jun 2012, 1:21 AM
Hi, all

I am using ExtJS 4.0.6.
I would like to change icon in actioncolumn when mouse over the icon


How should I do?

Thank in advance.
earist

sword-it
14 Jun 2012, 2:26 AM
Hi earist,
You can handle this change icon on mouseover functionality through the css rather than js.
While you are defining any action column item, you should define iconCls config rather than icon config to change the icon of that item on mouse hover.
Review the following code:



{
xtype:'actioncolumn',
width:50,
items: [{
iconCls: 'myClass', // define this css class in your code as given below
tooltip: 'Edit'
}]
}




<style type="text/css">
.myClass{background:url(/extjs-4.1.0/examples/restful/images/user.gif);height:16px;width:16px;}
.myClass:hover{background:url(/extjs-4.1.0/examples/restful/images/add.gif);}
</style>


To change the icon on mouse-over use CSS-PSEUDO class - ':hover'.

earist
14 Jun 2012, 7:33 PM
Thank you very much, sword-it.
It work!!

But I wonder if this code can be used in all browsers?
Now I test this code in Firefox12 Chrome11, and IE8
It's ok.

Thank you for your help again.
earist.