PDA

View Full Version : Tab Panel - Issue hidding first tab



mbharathiraj
14 Feb 2012, 2:10 PM
I'm trying to hide the first tab. Below code only hides the first tab button but not the content. If I specifiy "hidden:true" either in second or third tab I don't see any issue. Can someone please help?



Ext.onReady(function() {
var tabs = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Home',
html: 'Home',
itemId: 'home',
hidden:true
}, {
title: 'Users',
html: 'Users',
itemId: 'users'

}, {
title: 'Tickets',
html: 'Tickets',
itemId: 'tickets'

}]
});

});

mitchellsimoens
14 Feb 2012, 2:24 PM
I moved this to the Ext JS 4 Q&A forum.

vietits
14 Feb 2012, 3:50 PM
Let try by configuring your tab with activeTab: N with N > 0 when hiding first tab.


Ext.onReady(function() {
var tabs = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
activeTab: 1,
renderTo: document.body,
items: [{
title: 'Home',
html: 'Home',
itemId: 'home',
hidden:true
.....

mbharathiraj
14 Feb 2012, 5:50 PM
It didn't work. I have specified activeTab to 1. Although it hides the first tab button and content, it doesn't enable the second tab.

Romick
15 Feb 2012, 3:20 AM
It seams like a bug. But if do like this it works:


Ext.onReady(function() {
var tabs = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
activeItem: 1,
activeTab: 1,
items: [{
title: 'Home',
html: 'Home',
itemId: 'home',
hidden:true
}, {
title: 'Users',
html: 'Users',
itemId: 'users'

}, {
title: 'Tickets',
html: 'Tickets',
itemId: 'tickets'

}]/*,listeners: {
render: function(){
this.setActiveTab(1);
}
}*/
});

However, in docs:
activeItem (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.tab.Panel-cfg-activeItem) : String (http://docs.sencha.com/ext-js/4-0/#%21/api/String)/Number (http://docs.sencha.com/ext-js/4-0/#%21/api/Number)Doesn't apply for TabPanel (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.tab.Panel), use activeTab (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.tab.Panel-cfg-activeTab) instead.

mbharathiraj
15 Feb 2012, 7:13 AM
It's a bug. Specifying both activeTab and activeItem as part of the config resolves the issue. But in my case I want to do it dynamically. There is no setActiveItem method available.

mbharathiraj
15 Feb 2012, 7:49 AM
Logged a bug

http://www.sencha.com/forum/showthread.php?181039-Tab-Panel-Issue-hidding-first-tab&p=734978#post734978

Romick
17 Feb 2012, 8:03 AM
There is no setActiveItem method available.

No there is!!! I wrote it to you (commented) be attentive.



/*,listeners: {
render: function(){
this.setActiveTab(1);
}
}*/

setActiveTab(TabNumber);

mbharathiraj
17 Feb 2012, 8:10 AM
There is no setActiveItem method available.

No there is!!! I wrote it to you (commented) be attentive.



/*,listeners: {
render: function(){
this.setActiveTab(1);
}
}*/

setActiveTab(TabNumber);

I know the setActiveTab method. I'm not sepaking about that. Please read the bug info again. When you use hidden: true, setActvieTab method alone doesn't work. Instead remove the hidden config and use the hide and sectActiveTab method .