PDA

View Full Version : How to disable buttons in an Ext.TabPanel?



_dan
30 Jan 2011, 9:22 AM
Hi,

I want to disable a button in an TabPanel. How would I do this? Setting the item to disabled does not work.

Please help.


Ext.setup({
onReady: function() {

var btn1 = new Ext.Tab({
title: 'Home',
iconCls: 'home',
html:'<h1>1. Panel</h1>',

});
var btn2 = new Ext.Tab({
title: 'Info',
iconCls: 'info',
html:'<h1>1. Panel</h1>',
disabled:true,
});

var panel = new Ext.TabPanel({
fullscreen: true,
dockedItems: [],
items: [btn1, btn2],
tabBar: {
dock:'bottom',
cardSwitchAnimation:'slide',
sortable: false,
scroll: {
direction: 'horizontal',
useIndicators: true
},
layout: {
pack:'center'
}
}

});
}
});

AndreaCammarata
30 Jan 2011, 12:47 PM
Hi _dan.
Take a look at this example to know how to do what you request.



Ext.setup({
onReady: function() {

var btn1 = new Ext.Tab({
title: 'Home',
iconCls: 'home',
html:'<h1>1. Panel</h1>',

});
var btn2 = new Ext.Tab({
title: 'Info',
iconCls: 'info',
html:'<h1>1. Info Panel</h1>',
disabled:true,
});

var panel = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{
xtype:'toolbar',
dock: 'top',
title: 'Example',
items: [{
text: 'Disable Info Tab',
handler: function(){

//Disable the Info Tab
panel.getTabBar().getComponent(1).setDisabled(true);

}
}]
}],
items: [btn1, btn2],
tabBar: {
dock:'bottom',
cardSwitchAnimation:'slide',
sortable: false,
scroll: {
direction: 'horizontal',
useIndicators: true
},
layout: {
pack:'center'
}
}
});
}
});


Hope this helps.

_dan
30 Jan 2011, 12:55 PM
Hi Andrea,

thanks a lot. Disabling the tabbar item programmatically works great.

AndreaCammarata
30 Jan 2011, 12:56 PM
Hi Andrea,

thanks a lot. Disabling the tabbar item programmatically works great.

You are welcome ;)

_dan
30 Jan 2011, 1:12 PM
One mor question ;)

Is there any way to get the tab bar item by it's id or a given tag? Like that:



{
xtype:'panel',
html:'<h1>my html source code</h1>',
id:'myPanelID'
}
panel.getTabBar().getComponent('myPanelID').setDisabled(true);

AndreaCammarata
30 Jan 2011, 2:50 PM
Hi _dan, according to your request I open a new request of implementation to Sencha Team.
Take a look at my post:
http://www.sencha.com/forum/showthread.php?122596-Is-is-possibile-to-add-quot-tabBarItemId-quot-property&p=566346

I provide a simple solution to do this, you can temporarily adopt it to do what you request.

Hope this helps.

_dan
30 Jan 2011, 2:55 PM
Hi Andrea, thanks again. You are awesome :)

AndreaCammarata
30 Jan 2011, 2:57 PM
You are welcome _dan ;)