PDA

View Full Version : Dyamically loading nested tabs makes rest of tabs unclickable



akumar11
10 Feb 2012, 2:45 PM
Hi,

I have just started using extjs. I am loading the content of one sub-tab dynamically. As soon as this tab loads, I can't click on any other tab. Following is my code:

<html>
<head>
<title>Wyse WSM</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">

Ext.onReady(function() {

Ext.createWidget('tabpanel', {
renderTo: document.body,
resizeTabs: true,
activeTab: 0,
width:800,
height:800,
defaults :{
bodyPadding: 10
},
items: [{
title: 'Overview',
html: 'Overview'
},
{
xtype: 'tabpanel',
title: 'Device Mgt',
activeTab: 0,
padding: 5,
border: true,
plain: true,
defaults: {
padding: 10
},

items: [{
title: 'Devices',
id: 'devices',
loader: {
url: 'device.html',
scripts:true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
},{
title: 'Device groups',
id: 'deviceGrps',
html: 'Sub-tab 2 content'
}]
},
{
title: 'User Mgt',
html: 'User Mgt'
},
{
title: 'Settings',
html: 'Settings'
}
]
});
});
</script>
</body>
</html>


Thanks!!

mitchellsimoens
12 Feb 2012, 7:24 AM
Anything in devices.html that is prohibiting anything?

akumar11
13 Feb 2012, 1:48 PM
I figured out the problem - I had included ext-all-debug.js and ext-all.css again in devices.html. This was making all the other tabs un-selectable once devices.html got loaded.

Thanks for your help !!