PDA

View Full Version : Change tab title color to red



Srikanth474
21 May 2012, 3:46 AM
Hello,

I have a tab panel with 7 tabs in it. when user tries to submit the form and if there are required fields in any of the tabs which are not filled in. i have to show the tab color in red so that user can go into that tab and fill the required field.

How can i do this?

Thanks in Advance
Srikanth

sword-it
21 May 2012, 5:40 AM
Hi,

you can use setTitle function of tabpanel at the time you want to change the color of it.
Just use :-



yourtabpanel'stab.setTitle('<p style="color:red">This is sample</p>')



For more details, check this:- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel-method-setTitle

friend
21 May 2012, 5:53 AM
An alternative approach would be to use addClass()/removeClass() on the .tab property of each component which acts as a Tab.

maneljn
26 Oct 2012, 8:04 AM
if you want to use css, put this in tabchange event listener



onSubpanelTabchange: function(tabpanel, newcard, oldcard, eOpts) {
if (oldcard) {
oldcard.tab.btnEl.removeCls('esinube-tabpanel-titulo-activo');
}
if (newcard) {
newcard.tab.btnEl.addCls('esinube-tabpanel-titulo-activo');
}
},




/* Titulos tabpanel activo */
.esinube-tabpanel-titulo-activo {
color: rgb(175,0,0) !important;
}