关于extjs中动态添加TabPanel的tab项并以iframe显示的整理
近来的项目中用到了Extjs 的TabPanel,这也是Extjs最基本，最常用的组件了
网上或者书上的例子里大都是把tab项渲染到一个div中，
这对于在每个Tab页里加载一个页面的情况就不适合了
用ifame加载不同的页面应该是最合适的方式
网上也有用ifame显示子项的例子，
是把每一个子项都渲染成了一个ifame
感觉这样有问题，因为切换TabPanel的子项时，子页面不刷新
可能是因为每个ifame里对应的内容都都加载到了主页面，再切换时就不重新加载页面了
同时发现ifame对应的页面里再有js弹出窗口的话，窗体的返回值也取不到
而且采用这种方式，文档结构树上会有多个iframe！
加载多ifame的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../extjs2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs2.0/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../extjs2.0/ext-all.js">
</script>
<script type="text/javascript" src="../../extjs2.0/source/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":"http://www.baidu.com"},{"id":"fromInfo","text":"供货信息","url":"http://www.sohu.com"},{"id":"toInfo","text":"物流信息","url":"http://www.163.com"}]';
var oTabs = eval('(' + strTabs + ')');
if (oTabs != null && oTabs.length > 0) {
var tabs = new Ext.TabPanel({
renderTo: 'tabsContent',
activeTab: 0,
height: 700,
frame: true,
items: [{
id: oTabs[0].id,
title: oTabs[0].text,
html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + oTabs[0].url + '"> </iframe>'
}]
});
for (var j = 1; j < oTabs.length; j++) {
var oItem = {};
oItem.id = oTabs[j].id;
oItem.title = oTabs[j].text;
oItem.html = '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + oTabs[j].url + '"> </iframe>'
tabs.add(oItem);
}
}
else {
document.getElementById("tabsContent").style.display = "none";
}
});
</script>
</HEAD>
<BODY>
<div id="tabsContent" style="margin-top: 2px;">
</div>
</BODY>
</HTML>
附图：
后来经过反反复复的测试，终于整理出了一个个人感觉比较好的解决方案
这样页面上只有一个iframe ，加载iframe 内容页面正常。
代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../extjs2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs2.0/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../extjs2.0/ext-all.js">
</script>
<script type="text/javascript" src="../../extjs2.0/source/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":"http://www.baidu.com"},{"id":"fromInfo","text":"供货信息","url":"http://www.sohu.com"},{"id":"toInfo","text":"物流信息","url":"http://www.163.com"}]';
var oTabs = eval('(' + strTabs + ')');
if (oTabs != null && oTabs.length > 0) {
document.getElementById("frmContent").src = oTabs[0].url;
var tabs = new Ext.TabPanel({
renderTo: 'tabsContent',
activeTab: 0,
collapsed: true,
items: [{
id: oTabs[0].id,
title: oTabs[0].text,
contentEl: 'tabItem'
}]
});
for (var j = 1; j < oTabs.length; j++) {
var oItem = {};
oItem.id = oTabs[j].id;
oItem.title = oTabs[j].text;
oItem.contentEl = 'tabItem';
tabs.add(oItem);
}
tabs.addListener("tabchange", function(tabs, nowtab){
for (var s = 0; s < oTabs.length; s++) {
if (oTabs[s].id == nowtab.id) {
document.getElementById("frmContent").src = oTabs[s].url;
break;
}
}
});
}
else {
document.getElementById("tabsContent").style.display = "none";
}
});
</script>
</HEAD>
<BODY>
<div id="tabsContent" style="margin-top: 2px;">
<div id="tabItem" style="width: 0px; height: 0px;">
</div>
</div>
<div id="tabItemsRender" style="height: 440px; overflow: auto; border-left-style: solid; border-left-width: 1px; border-left-color: #8DB2E3; border-right-style: solid; border-right-width: 1px; border-right-color: #8DB2E3; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #8DB2E3;">
<iframe id="frmContent" name="frmContent" src="" frameborder="0" height="100%" width="100%">
</iframe>
</div>
</BODY>
</HTML>
关于extjs中动态添加TabPanel的tab项并以iframe显示的整理的更多相关文章
- EasyUI创建异步树形菜单和动态添加标签页tab
创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...
- VC中动态添加控件
VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- Android 在程序中动态添加 View 布局或控件
有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...
- Unity NGUI中动态添加和删除sprite
(以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网 比巴卜: 参考链 ...
- 谨记给UpdatePanel中动态添加的控件赋ID
原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...
- Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务
Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...
随机推荐
- Android RemoteViews 11问11答
1.什么是RemoteView? 答:其实就是一种特殊的view结构,这种view 能够跨进程传输.并且这种remoteview 还提供了一些方法 可以跨进程更新界面.具体在android里面 一个是 ...
- NodeJS模块
node> module { id: 'repl', exports: { writer: { [Function: inspect] colors: [Object], styles: [Ob ...
- geotools导出shapefile出错： java.io.IOException: Current fid index is null, next must be called before write()
geotools导出shapefile出错: java.io.IOException: Current fid index is null, next must be called before wr ...
- Suse linux 11 SP2 nginx 使用笔记
1. 下载源代码 http://nginx.org/en/download.html 2. DAV模块缺省没有编译,要加入编译选项 # ./configure --with-http_dav_mo ...
- linux log4j 使用
1.首先到Apache官网下载log4j.jar文件http://logging.apache.org/log4j/1.2/download.html 引用到eclipse项目里面 2.在src目录下 ...
- ArcGIS 开发的一些知识学习点
由于文章太多,不便转载,现主要列举如下: ArcGIS Runtime支持的GP工具列表 ArcGIS Runtime支持的GP工具列表 目录(?)[-] Standard版本Standard 空间分 ...
- a different object with the same identifier value was already associated with **(ssh异常转)
Hibernate:a different object with the same identifier value was already associated with ...异常解决 今天 ...
- windows10UWP开发真机调试时遇到DEP6100和DEP6200解决办法
windows10UWP开发真机调试时遇到DEP6100和DEP6200(其实未连接上设备都会报这两个错误,无论真机还是虚拟机)…… 此方法适合真机调试时遇到: 弹出提示框要求输入配对码,无论如何输入 ...
- 数往知来 AJAX Ajax增删改查<十九>
=================================================客户端================================================ ...
- postsharp初体验
首先,有必要先介绍下,什么叫做AOP(Aspect-Oriented Programming,面向切面编程).下图是百度的词条解释 用图来解释可能更直接了当些: ps:图片来自http://www.c ...