View Full Version : Tabs highlight

8 Aug 2009, 6:04 AM
I got a dialog windows with several tabs.
Whenever save button is clicked i am validating all tabs, and dont let the user to save if any error is found.

Now i am thinking it would be nice to somehow highlight to the user on tab that is being invalid.
But I not sure wht is the best way. I tried using highlight() on the tab header text color, but its almost not visible. Background of header tab seems hard to change as there are left and right edges that are transparent...

any suggestion or idea what might catch user's eye and doable in the extjs?


11 Aug 2009, 4:45 AM
one of the eastiest way is to wrap the tab's title in a span that has the color set to red.

11 Aug 2009, 5:18 AM

Then do with it what you will.

Add a class, highlight() it, frame() it, whatever.

11 Aug 2009, 10:02 AM
I can successfully do what you both suggested.

My problem is that highlighting the text color is not visually sufficient for user experience, hence i wanted your advice about not only the technical way of doing it but also some ideas of what to do to accomplish the task.

I failed to change the background, but got no other ideas of approaches. Maybe adding some blinking border?

11 Aug 2009, 10:03 AM
Have you tried the frame() animation like Animal suggested?

11 Aug 2009, 10:13 AM
Wow it actually cool :)
I will stick with it :)
thanks Animal and Condor!

ps. Can it be ellipsis shape and not square?

11 Aug 2009, 10:17 AM
no, it's just animating a div with a border. that said, I don't think frame is the best way to go. I would change the style of the tab to include a different color (you can't apply a highlight effect on an element that has a background image).

You can start by copying the tab css and images and modify accordingly.