ExtJS中TabPanel用iframe加载其他完整页面的处理方法

前几天工作中需要使用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 id=""alarmFrame"……style="overflow:hidden;display:none;""中，我把这个标签的现实属性设置为：display:none。这时因为，如果我不设置成隐藏的话，在加载完之后，两个iframe的内容都会在页面上现实处理。这时不符合要求的。因为设置成隐藏。所以，需要添加事件处理。将它的现实属性修改为可见。另外，这个“两个iframe的内容都会在页面上”的问题只有在加载完成后，第一次切换标签页之前，才会有。当切换一次标签页之后就没有了。所以，只需要在第一次切换标签页时，把页面设置成可见即可。

②、由于TabPanel的事件监听在加载时会自动执行一遍。而这时，我并不需要把《iframe id="alarmFrame"》设置设置成可见。所以，需要对事件处理需要做个特殊处理。详细处理方法。请见代码。

很显然，这种方法一些不足，主要是添加事件监听；同时，还要先把页面隐藏起来。我相信，还会有更好的实现方式。

第二种方法：

其实，我们只需要把这个iframe标签的内容放到TabPanel的配置项html中即可。而且，还没有第一种方法的缺点。具体步骤如下：

1、在index.jsp的body中，添加如下代码：

 

2、在index.jsp文件的script（注意：这个标签要放在引入ExtJS库的script标签后面）标签中，添加生成TabPanel的代码。如下：

 

   });

});

执行，相信没什么问题。

最后，留给大家一个问题：在：“Ext.TabPanel之第一式”中，通过使用onclick事件改变src属性值的方式，来实现TabPanel页内容的切换。请问，能否通过TabPanel的tabchange事件改变src属性值的方式来实现标签页的切换？

 

注：本来想贴代码，方便大家使用。奈何编辑工具不给力，标签不能正常转换。如果需要代码，请给我留言，我发到各位的邮箱里。