View Full Version : disable tabbar item

4 Aug 2010, 10:57 AM
I'm trying to set an item in my tabbar to be visible but not usable. Having the item grayed out or faded would be ideal but not necessary. Here's some sample code that might give you an idea of what I'm trying to do. I also tried it in the kitchen sink example and am not sure why it is not working. Thank you for your time and I hope you can help.

onReady: function() {
var settings = new Ext.Panel({
fullscreen: true,
//would like this panel to be disabled and it is not.
disabled: true,
model: true,
title: 'Settings',
iconCls: 'settings',
html: 'Settings'
var home = new Ext.Panel({
fullscreen: true,
model: true,
title: 'Home',
iconCls: 'home',
html: 'Home'
new Ext.TabPanel({
fullscreen: true,
modal: true,
tabBar: {
dock: 'bottom',
layout: {pack: 'center'}
animation: 'slide',
items: [home, settings]


items: [{
title: 'About',
html: '<p>Docking tabs to the bottom will automatically change their style. The tabs below are ui="light", though the standard type is dark. Badges (like the 4 below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card card1'
title: 'Favorites',
html: 'Favorites Card',
iconCls: 'favorites',
cls: 'card card2',
badgeText: '4',
disabled: true
title: 'Downloads',
id: 'tab3',
html: 'Downloads Card',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card card3',
iconCls: 'download'
title: 'Settings',
html: 'Settings Card',
cls: 'card card4',
iconCls: 'settings'
title: 'User',
html: 'User Card',
cls: 'card card5',
iconCls: 'user'

26 Aug 2010, 3:27 PM
I'm looking for the same. Please help. j

8 Dec 2010, 3:23 AM
This was causing me some headache to. As I can see there is no (simple to find ) way to get hold of the tab instances in the tabBar. By with some frustration reading the source code I found this solution.

//Get hold of the tab instances in the tabbar.
var tabitems = this.getTabBar().items.items;

//Now you can disable/enable (or hide them) them by
tabitems[tabindex you want to target].setDisabled(true);

Hope this helps someone...

24 Mar 2011, 5:08 PM
thanks a ton for this.