Extjs 4.1 选项卡面板不显示数据
Posted
技术标签:
【中文标题】Extjs 4.1 选项卡面板不显示数据【英文标题】：Extjs 4.1 tabpanel not showing data 【发布时间】：2012-12-18 10:29:13 【问题描述】：我是 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()
);
);
这里我在加载器配置中使用了三个 html 文件。我的问题是在执行时，第一个选项卡工作正常。但是在其他两个选项卡的情况下，即 Ajax Tab 2,Ajax Tab 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>
我希望所有三个选项卡都能在选择时完美显示数据。 谁能帮我解决这个问题。 :)
【问题讨论】：
我是 ExtJs 的新手。我试过你的脚本。除了一件事，一切都很好。当我单击使用 Ajax 加载的任何选项卡时，其他选项卡将被禁用，即我无法单击它们。 【参考方案1】：我的错误是在所有用于呈现 JavaScript 文件内容的 HTML 文件中使用相同的 div id。为了解决我的问题，我使我的 div id 独一无二。
【讨论】：
【参考方案2】：尝试使用 tabchange 事件。应该可以的。
例如：
'tabchange':
fn: function(tab)
tab.loader.load();
【讨论】：
【参考方案3】：以防上述选项不起作用（对我不起作用）..我尝试将“layoutOnTabChange:true”添加到我的 Tabpanel 中，我可以看到内容。
【讨论】：
以上是关于Extjs 4.1 选项卡面板不显示数据的主要内容，如果未能解决你的问题，请参考以下文章
Extjs 4.1 - 如何在网格面板中显示 html 数据