Results 1 to 3 of 3

Thread: Change icon in actioncolumn when mouseover this icon

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    48
    Answers
    1
    Vote Rating
    1
      0  

    Default 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 User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124
    Vote Rating
    91
      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
    48
    Answers
    1
    Vote Rating
    1
      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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •