PDA

View Full Version : autLoad cause other tabs disabled



adarshdchaurasia
30 Sep 2013, 7:07 AM
When I load a tab using loader, other tab gets disabled i.e. I am not able to click and show other tab. Any help?

<html>
<head>
<title>Sample Console</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>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: 'frmSampleConsole',
split: true,
height : '100%',
width : '100%',
layout:'border',
defaults: {
collapsible: true,
split: true
//bodyStyle: 'padding:15px'
},
items:
[
{
title: 'Report',
region : 'west',
width : 280,
loader: {
url: 'report.html',
renderer: 'html',
autoLoad: true,
scripts: true
}
}
,
{
id :'tabpanel',
xtype:'tabpanel',
title: 'Main Content',
collapsible: false,
region:'center',
items : [
{
id :'tab1',
title : 'Tab1',
layout : 'fit',
closable: true,
loader: {
url: 'form.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
render: function(tab) {
tab.loader.load();
}
}
}
,
{
id : 'tab2',
title: 'Tab2',
collapsible: false,
margins: '5 0 0 0',
activeTab:1,
items: [
{
html : 'Sample html content'
}
]
}
]
}
]
});


});
</script>
</head>
<body>
<div id = 'frmSampleConsole'></div>
</body>
</html>

slemmon
2 Oct 2013, 1:53 PM
It seems to be working for me using ExtJS 4.2.1. See example below:



Ext.widget('viewport', {
layout: 'border',
defaults: {
collapsible: true,
split: true
//bodyStyle: 'padding:15px'
},
items: [{
title: 'Report',
region: 'west',
width: 280,
loader: {
//url: 'report.html',
url: 'data/json.json',
renderer: 'html',
autoLoad: true,
scripts: true
}
}, {
id: 'tabpanel',
xtype: 'tabpanel',
title: 'Main Content',
collapsible: false,
region: 'center',
items: [{
id: 'tab1',
title: 'Tab1',
layout: 'fit',
closable: true,
loader: {
//url: 'form.html',
url: 'data/json.json',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
render: function (tab) {
tab.loader.load();
}
}
}, {
id: 'tab2',
title: 'Tab2',
collapsible: false,
margins: '5 0 0 0',
activeTab: 1,
items: [{
html: 'Sample html content'
}]
}]
}]
});


Loader response for the example:


<h1>Sample Html</h1>


Sample Html Body