PDA

View Full Version : How to adjust tab look & feel?



kchiu
8 Oct 2009, 8:29 PM
Hi,

I have a TabPanel containing a number of Panels and FormPanels. I'd like to dynamically adjust the following based on each tab's content:
- tab title + font + colour + style/decoration (eg. bold, line-through)
- tab icon

Where and how do I adjust those in Ext?

thanks heaps, cheers.

zhegwood
8 Oct 2009, 10:44 PM
First thing I'd do is specify a cls:'whatever' in the containing panel/container/whatever (the container of the tabs). Then I'd override as needed. x-tab-panel is the base (outer-most) class for tabs, so go from there.

kchiu
9 Oct 2009, 9:57 PM
Hi,

Thanks for the reply.


First thing I'd do is specify a cls:'whatever' in the containing panel/container/whatever (the container of the tabs). Then I'd override as needed. x-tab-panel is the base (outer-most) class for tabs, so go from there.

This looks like it will make global changes to how all tabs look; or at least force all tabs of a given container to look the same.

What I need is to give individual tabs independent look-and-feel, so where in each tab can I do that?

thanks again, regards.

Condor
10 Oct 2009, 3:56 AM
Changing the font or the icon is the easiest:
1. Specify an iconCls in the tabpanel items to display an icon.
2. Specify the title of the tabpanel items as HTML, e.g '<span style="color: red">My tab<span>'.

Changing the background images requires that you add a class to the tabEl and write css rules for it.

kchiu
10 Oct 2009, 11:01 PM
Cool, I'll try those out.

thanks, cheers.

kchiu
11 Oct 2009, 9:08 PM
Changing the font or the icon is the easiest:
2. Specify the title of the tabpanel items as HTML, e.g '<span style="color: red">My tab<span>'.

OK, after some experimenting, I've got most of what I need, except 1 thing: I'd like to display some tabs with a title like '<someTitle>*' where the <someTitle> part displays with line-through, and the * part is displayed without line-through.

I've tried the following without success:


{xtype: 'textarea',
title:
'<span style="text-decoration: line-through">' +
'Details 4'+
'</span>*'}


The live example is here: http://128.250.148.12:8080/examples/tabStyles.html

Notice tab 3 shows the * with line-through (which is not what I want), and tab 4 shows the non-line-through * on the next line (which isn't what I want either).

Any idea what I can do?

thanks again, cheers.

Condor
11 Oct 2009, 11:02 PM
It's affected by the ".x-tab-strip span" css rule.

To undo this rule you need to write:

{
xtype: 'textarea',
title: '<span style="text-decoration: line-through; display: inline;">Details 4</span>*'
}

kchiu
11 Oct 2009, 11:10 PM
Cool, works now! Thanks a lot!