ExtJS中TabPanel用iframe加载其他完整页面的处理方法
2011-11-01 15:16
363 查看
前几天工作中需要使用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"》设置设置成可见。所以,需要对事件处理需要做个特殊处理。详细处理方法。请见代码。
很显然,这种方法一些不足,主要是添加事件监听;同时,还要先把页面隐藏起来。我相信,还会有更好的实现方式。java-javascript 风之境地
第一个方法:
照着那篇文章,同时参考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"》设置设置成可见。所以,需要对事件处理需要做个特殊处理。详细处理方法。请见代码。
很显然,这种方法一些不足,主要是添加事件监听;同时,还要先把页面隐藏起来。我相信,还会有更好的实现方式。java-javascript 风之境地
相关文章推荐
- ExtJS中TabPanel用iframe加载其他完整页面的处理方法
- Extjs4.2 TabPanel中使用Ext.ux.IFrame组件加载内容页面
- EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示
- EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示
- ExtJS 4.1 TabPanel动态加载页面并执行脚本
- ExtJs中tabPanel放置iframe无法兼容IE6的解决方法
- ExtJs中tabPanel放置iframe无法兼容IE6的解决方法
- ExtJs中tabPanel放置iframe无法兼容IE6的解决方法
- EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示
- Bootstrap tab选项卡实现AJAX加载不同的JSP页面的方法
- EXTjs通过autoLoad加载页面与IFRAME嵌入页面的区别
- 关于extjs中的tabpanel的刷新等若干问题,解决tabpanel内页面刷新,更新数据等问题。
- 一个iframe,点击每个tab加载相应的页面进来iframe
- ExtJS panel展开时加载数据或页面
- Extjs4 Panel中使用autoload无法加载页面文件
- SSH页面懒加载异常处理方法
- ExtJS中store自动加载数据的时候,在firebug下http status为Aborted时的处理方法
- Extjs 的Panel放入iframe的三重方法
- EasyUI两种动态添加tab Iframe页面的方法
- ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法