1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    0
    vikas09 is on a distinguished road

      0  

    Default Unanswered: How to highlight Labels and images in Panel.

    Unanswered: 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

  2. #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 use "overCls" config of the label.

    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
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    0
    vikas09 is on a distinguished road

      0  

    Default


    Thanks Sword

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    5
    Vote Rating
    0
    vikas09 is on a distinguished road

      0  

    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.

Thread Participants: 1

Tags for this Thread