How to highlight Labels and images in Panel.

[vikas09]

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.

[sword-it]

Hi Vikas,

Use "overCls" config for apply extra css to the label text on mouse hover like -

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'
        }
    ]
})

.class{
  color:red !important;
  font-size:18px;
}

Read API docs- http://docs.sencha.com/ext-js/4-1/#!...el-cfg-overCls

[vikas09]

Thanks Sword

[vikas09]

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.