Change icon in actioncolumn when mouseover this icon

[earist]

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]

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]

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.