前几天工作中需要使用Ext的TabPanel标签页加载两个完整页面。就在网上查，看到了这篇文章：“Ext.TabPanel之第一式”。这篇文章讲解到如何在“用iframe加载其他完整页面的tabpanel”。但是，里面只加载了一个页面，而且切换页面时，是点击TabPanel外的一个“链接”，然后使用onclick事件来处理的。显然，不符合要求。不过，这篇文章也给我指明了方向，教会了如何使用TabPanel。可以照着这个思路做处理。
第一个方法：
照着那篇文章，同时参考ExtJS的API文档，写一个例子。步骤如下：
注：这里我只粘贴最主要的代码，至于ExtJS库的引入方法和需要引入的文件，请参考“深入浅出Ext JS（第二版）——学习笔记”；次要代码，可以自己补充。
1、首先在页面中引入ExtJS库。然后在index.jsp的body标签中，添加如下代码：
注：请把keyIndex.jsp和alarmIndex.jsp存放在这个index.jsp文件的同一目录下。这两个文件的内容可以随意填写，只需要能区分开就可以了。
2、在index.jsp文件的script（注意：这个标签要放在引入ExtJS库的script标签后面）标签中，添加生成TabPanel的代码。如下：
Ext.onReady(function(){
var firstActive = true; //处理加载时，事件监听自动执行的问题。
var kpiTab=new Ext.TabPanel({
renderTo:'kpiTab',
activeTab:0,
height:438,//设置TabPanel标签页的高度。当用viewport布局时,这个height可以省去
frame:true,
items:[
{
contentEl:"keyFrame",
title:"关键信息",
closable:false
},
{
contentEl:"alarmFrame",
title:"预警信息",
closable:false
}
],
listeners:{
'tabchange' : function(tp, panel){
if(firstActive){ //处理加载时，事件监听自动执行的问题。我们让第一次加载时不执行即可。
firstActive = false;
}else{
document.getElementById('alarmFrame').style.display='block';
}
}
}
});
});
这个标签页就可以正确加载两个完整的页面了。
这里有两个问题需要注意：
①、在iframe >风之境地