PDA

View Full Version : Tab color and highlight



shinkenno
21 Sep 2009, 2:30 AM
Hi everyone,

I am wondering if it possible to associate the highlight function to a tab element title in order to change its background color for a given duration ?

This kind of code unfortunately does not seem to work:


Ext.get(myTabPanel.getTabEl(tabId)).highlight("ffff9c", {
duration: 100
});

Thanks for your help !

aconran
21 Sep 2009, 3:42 AM
Because the styling of tabs are implemented with images this will not work very well. A very effective way to bring attention to a particular tab is by using an icon with the tab and changing the icon to something new when you want to bring attention to that tab.

shinkenno
21 Sep 2009, 7:09 AM
Thanks for your answer !

It's too bad it could not work this way...
Anyway, your idea concerning the icon is a very good idea. Is there a simple way to display the icon a specific time and then to hide it ? (I pretty sure it is possible with an appropriate handler function, but I want to be sure not to take the longest path to do it...)

aconran
21 Sep 2009, 8:27 AM
There is no shortcut method for setting a particular icon for a brief period. You just need to set the icon and then set it back to what it previously was.

mschwartz
21 Sep 2009, 8:47 AM
Tab styling varies from application to application. It wouldn't hurt if Ext provided some better functionality for decorating tabs other than just the image.

See attached, active tab and inactive tab for Firefox under Ubuntu.

The blue horizontal bar a the top of the tab is a nice touch. Other applications, like jEdit (I think...) do even more advanced styling of the tabs, like red to show .js files, blue to show .html, etc.

FWIW

aconran
21 Sep 2009, 8:55 AM
Tab styling varies from application to application. It wouldn't hurt if Ext provided some better functionality for decorating tabs other than just the image.

See attached, active tab and inactive tab for Firefox under Ubuntu.

The blue horizontal bar a the top of the tab is a nice touch. Other applications, like jEdit (I think...) do even more advanced styling of the tabs, like red to show .js files, blue to show .html, etc.

FWIW

I can see where you are going with this. The specific example you pointed out (Firefox active tab) could easily be accomplished by changing the active sprite resources/images/default/tabs/tabs-sprite.gif

You can always add provide an additional css class to each Panel contained within the TabPanel with the tabCls configuration. This will give you an additional class to override the default styling and give it the custom styling that you desire.