前几天工作中需要使用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属性值的方式来实现标签页的切换?
注:本来想贴代码,方便大家使用。奈何编辑工具不给力,标签不能正常转换。如果需要代码,请给我留言,我发到各位的邮箱里。
(这是我发表到我自己博客上的文章贴出来和大家分享!)
更多内容,请见我的博客:“地瓜哥”,http://www.diguage.com/
分享到:
相关推荐
ExtJS tabPanel实例ExtJS tabPanel实例
extjs4.2.1 tabPanel刷新及关闭标签
Extjs4.2 设置tabpanel当前活动页签的样式
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
使用方法 页面引入jQuery.js、TabPanel.js、Fader.js、TabPanel.css new TabPanel({ renderTo:'tabs', width: '100%', height: '500px', active: 0, items: [{ title:'工作中心', html:'<iframe ...
NULL 博文链接:https://rowen.iteye.com/blog/446163
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
ExtJs中Store加载(load)时候提示信息
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
Extjs6 插件IFrame.js存在一定问题。同步利用ajax进行异步检测访问是否可达,如果不可达则重置iframe的url,指定显示404界面。
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
AJAX: 以JSON数据格式,使用ExtJS构造动态异步加载的树。
extjs tree 异步加载树型完整的一个web工程,自已已经试过,可用。
可二次开发Extjs4.0通用后台管理系统源码完整大型项目。数据库在项目里面的一个sql文件里面 1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高...
extjs4.0中,不想一次性加载所有的controller,特别是那种tabPanel布局的时候,一个tab的内容对应一个controller的时候。可以通过动态创建controller的方式,还能遵循mvc设计规范。这个例子完美破解,经过测试。 ...
extjs4,当点击左边的树,右边会生成相应的面板,代码精简,欢迎大家来学习,有问题可以直接交流。
ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4...
此框架,使用的是EXTJS,主要适合于后台的管理界面和内部使用的管理系统布局。 适用于美工不好,又比较懒的人...根据我自己的需要,结合性能方面的考虑,我使用的是iframe的浏览方式,内部的功能页面,均不使用EXTJS。
ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框