PDA

View Full Version : How to highlight Labels and images in Panel.



vikas09
17 Oct 2012, 4:53 AM
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
17 Oct 2012, 5:56 AM
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/#!/api/Ext.form.Label-cfg-overCls

vikas09
17 Oct 2012, 10:00 PM
Thanks Sword :)

vikas09
18 Oct 2012, 4:59 AM
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.