关于extjs中动态添加TabPanel的tab项并以iframe显示的整理
2009-11-26 19:22
495 查看
近来的项目中用到了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>
网上或者书上的例子里大都是把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显示的整理(转)
- 关于extjs中动态添加TabPanel的tab项并以iframe显示的整理
- 我自己写的关于EXTJS的TreePanel、viewPort和tabPanel动态切换和添加tabpanel的例子
- 关于ExtJS TabPanel中column布局不显示问题
- ExtJs 4.x 学习小记：Ext.TabPanel动态隐藏及显示
- ExtJs 关于Tabpanel与fieldset切换时 fieldset在其他tab面板无法显示
- [EXTJs]TabPanel动态生成,加载组件时,组件不能正常显示的解决办法
- 关于echarts在节点显示动态数据及添加提示文本所遇到的问题
- [ExtJS4]ExtJS4左边菜单面板收缩展开，右边TabPanel内容动态更新（解决宽度不能自适应问题）
- 关于动态添加页面（iframe + mhtml）
- ExtJS动态添加和删除tab标签实例
- ExtJS 4.1 TabPanel动态加载页面并执行脚本
- EasyUI两种动态添加tab Iframe页面的方法
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开，右边TabPanel内容动态更新（解决宽度不能自适应问题）
- ExtJS让被遮盖的窗体显示在最前面以及解决Ext.MessageBox提示框被TabPanel覆盖的方法【转】
- ExtJS中TabPanel用iframe加载其他完整页面的处理方法
- Ext JS4.0中Tabpanel动态添加和删除Tab和重用Tab的方法
- ExtJs基础知识总结：Dom、IFrame和TreePanel、TabPanel（三）
- extjs 中关于列表框(multiselect)的动态添加列表项的方法
- EasyUI两种动态添加tab Iframe页面的方法