PDA

View Full Version : Highlight Tab after setCard



qazs
29 Jun 2010, 9:13 PM
Hi,
I have the following code which renders an external js. Its working properly except that the 'Test' tab is not highlighted when clicked. Is there anything that I missed out?



var panel = new Ext.TabPanel({
tabBar: {
id: 'tabbar',
dock: 'bottom',
layout: {
pack: 'center'
},
listeners: {
change: function(tabbar, tab, card){
tab.addClass('x-tab-active'); // Doesn't work
if(card.card){
panel.setCard(card.card, 'slide');
}
}}
},
items[
{
title: 'Test',
id: 'tab1',
card: cards.Test,
source: 'src/cards/test.js',
}]
)}

mrsunshine
30 Jun 2010, 2:16 AM
Hi,
I have the following code which renders an external js. Its working properly except that the 'Test' tab is not highlighted when clicked. Is there anything that I missed out?



var panel = new Ext.TabPanel({
tabBar: {
id: 'tabbar',
dock: 'bottom',
layout: {
pack: 'center'
},
listeners: {
change: function(tabbar, tab, card){
tab.addClass('x-tab-active'); // Doesn't work
if(card.card){
panel.setCard(card.card, 'slide');
}
}}
},
items[
{
title: 'Test',
id: 'tab1',
card: cards.Test,
source: 'src/cards/test.js',
}]
)}

Why did you do this your own?
The active tab gets the 'x-tab-active' class by its own, take a look at the tabpanel example.

qazs
30 Jun 2010, 2:51 AM
Yes, it's supposed to be active, just that it's not highlighted. I can't figure out why.

mrsunshine
30 Jun 2010, 6:32 AM
testet in safari and you can see the active class

qazs
14 Jul 2010, 12:00 AM
I think it's because it's calling an external card instead of those specified in the tabpanel. Nevertheless I found a way to force the highlight, but is there a more elegant way of doing this?


Ext.iterate(tabpanel.tabBar.items.items, function(key, value){
var activeCls = tabpanel.tabBar.items.items[value].activeCls;
if(value == 2){
tabpanel.tabBar.items.items[value].addClass(activeCls);
}
});

rharri
6 Jan 2011, 10:47 PM
Your original attempt would have worked. However, you called "addClass" instead of "addCls".

I recently encountered a similar scenario where my panels are not "linked" to the tabpanel, but I still needed to have the active tab set. Below is my code. Perhaps there is even a more elegant way.



listeners: {
change:function(tabbar, tab, card){

// Remove the "active" class from all tabs
var tabsArray = Ext.ComponentQuery.query('.tab');
for (var i = 0; i < tabsArray.length; i++)
tabsArray[i].removeCls('x-tab-active');

// Set the current tab
tab.addCls('x-tab-active');
}
}