Results 1 to 4 of 4

Thread: How to highlight Labels and images in Panel.

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    5

    Default How to highlight Labels and images in Panel.

    Ext Version Tested:
    4.1.1

    Browser Version tested against:

    IE7, IE8, Chrome Version 22.0.1229.94 m


    Description:

    I have to create a panel with 2 labels( at left and right side) and a label( show Filter) with arrow sign in the center as shown in image 1.jpg ( file attached).


    On Mouse over on Show Filter label, it should be highlighted with arrow sign with different color as shown in the image 2.jpg( file attached).



    Problem:

    I have tried to find some events like onFocus or onMouseOver on label or image to highlight and change its color, but unfortunately, I am not finding any such event in case of label or image. So, please suggest me that how can I achieve this requirement.
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default use "overCls" config of the label.

    Hi Vikas,

    Use "overCls" config for apply extra css to the label text on mouse hover like -
    Code:
    Ext.create('Ext.panel.Panel', {
    
        title:'sample',
        width:200,
        height:200,
        renderTo:Ext.getBody(),
        items:[
            {
                xtype:'label'
                , overCls:'class'
                , style:'font-weight:bold;text-size:14px;color:blue;'
                , html:'Sword-it'
            }
        ]
    })
    Code:
    .class{
      color:red !important;
      font-size:18px;
    }
    Read API docs- http://docs.sencha.com/ext-js/4-1/#!...el-cfg-overCls

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    5

    Default

    Thanks Sword

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    5

    Default

    Hi Sword,

    overCls is working fine for color change of the label "ShowFilters".
    As I have a requirement to change the arrow mark image(adjacent to the ShowFilters) as well, but i am not able to change the arrow mark image with the use of overCls. Could you please help in that.

    PS: Here changing of image means replacing the image.

Tags for this Thread

Posting Permissions

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