我是Extjs的新手。目前正在使用Extjs 4.1.1a进行一些应用。我在应用程序中定义了以下选项卡面板。
Ext.require('Ext.tab.*');
Ext.onReady(function(){
var tabs2 = Ext.widget('tabpanel', {
activeTab: 0,
width: 600,
height: 250,
plain: true,
defaults :{
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Ajax Tab 1',
loader: {
url: 'dynamic.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
},{
title: 'Ajax Tab 2',
loader: {
url: 'group_associator.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
},
{
title: 'Ajax Tab 3',
loader: {
url: 'group_disassociator.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
}
],
renderTo : Ext.getBody()
});
});
在这里，我在loader配置中使用了三个html文件。我的问题是执行，第一个选项卡工作得很好。但对于其他两个选项卡，即Ajax选项卡2和Ajax选项卡3，只有一个选项卡能完美地显示数据。我已经使activeTab=0，所以默认情况下第一个选项卡将处于活动状态。但如果我选择第二个选项卡，它将正常工作，如果我选择了第三个选项卡，则不会显示任何数据。但是，在刷新页面后，如果我选择第三个选项卡，它将正确显示数据，而现在如果我选择了第二个选项卡，则不会显示任何数据。在所有情况下，默认活动选项卡(即Ajax选项卡1)将正确显示数据。因此，每次刷新时只有一个选项卡可以完美工作，即Ajax选项卡2或Ajax选项卡3。
以下是tabpanel将渲染到的html文件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabs Example</title>
<!-- Ext includes -->
<link rel="stylesheet" type="text/css" href="ext-4.1.1a/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.1.1a/ext-all.js"></script>
<!-- Shared example includes -->
<link rel="stylesheet" type="text/css" href="ext- 4.1.1a/examples/shared/example.css" />
<!-- Example includes -->
<link rel="stylesheet" type="text/css" href="tabs.css" />
<!-- GC -->
<script type="text/javascript" src="tabs1.js"></script>
</head>
<body>
<div id="tabs1">
</div>
</body>
</html>
我希望所有三个选项卡都能在选择时完美地显示数据。有人能帮我摆脱困境吗
我的错误是在所有用于呈现JavaScript文件内容的HTML文件中使用相同的div id。为了解决我的问题，我使我的div id独一无二。
尝试使用tabchange事件。这应该行得通。
例如：
'tabchange': {
fn: function(tab) {
tab.loader.load();
}
}
以防万一以上选项不起作用(对我来说不起作用)。。我试着将"layoutOnTabChange:true"添加到我的选项卡面板中，我可以看到其中的内容。