1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    44
    Answers
    1
    Vote Rating
    1
    earist is on a distinguished road

      0  

    Default Answered: Change icon in actioncolumn when mouseover this icon

    Answered: Change icon in actioncolumn when mouseover this icon


    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

  2. 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:
    Code:
    {
       xtype:'actioncolumn',
       width:50,
       items: [{
          iconCls: 'myClass',  // define this css class in your code as given below
          tooltip: 'Edit'
       }]
    }
    HTML Code:
    <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'.

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    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:
    Code:
    {
       xtype:'actioncolumn',
       width:50,
       items: [{
          iconCls: 'myClass',  // define this css class in your code as given below
          tooltip: 'Edit'
       }]
    }
    HTML Code:
    <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'.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    44
    Answers
    1
    Vote Rating
    1
    earist is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1