出处:http://blog.163.com/baihongtao_618/blog/static/1423479702012392948830/

近来的项目中用到了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="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/ext-all.js">
        </script>
        <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/source/locale/ext-lang-zh_CN.js">
        </script>
        <script type="text/javascript">
            Ext.onReady(function(){
                Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/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="http://blog.163.com/baihongtao_618/blog/' + 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="http://blog.163.com/baihongtao_618/blog/' + 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="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/ext-all.js">
        </script>
        <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/source/locale/ext-lang-zh_CN.js">
        </script>
        <script type="text/javascript">
            Ext.onReady(function(){
                Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/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="http://blog.163.com/baihongtao_618/blog/" frameborder="0" height="100%" width="100%">
            </iframe>
        </div>
    </BODY>
</HTML>

转载于:https://www.cnblogs.com/smileberry/archive/2012/09/10/2679004.html

关于extjs中动态添加TabPanel的tab项并以iframe显示的整理(转)相关推荐

  1. android viewpager动态加载页面,Android viewpager中动态添加view并实现伪无限循环的方法...

    本文实例讲述了Android viewpager中动态添加view并实现伪无限循环的方法.分享给大家供大家参考,具体如下: viewpager的使用,大家都熟悉,它可以实现页面之间左右滑动的切换,这里 ...

  2. Android 在布局容器中动态添加控件

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

  3. ASP.NET 2.0 中动态添加 GridView 模板列

      ASP.NET 2.0 中动态添加 GridView 模板列的例子 动态添加列,关键是实现 ITemplate.InstantiateIn 方法.下面是一个添加 GridView 模板列的例子. ...

  4. Unity NGUI中动态添加和删除sprite

    (以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网 比巴卜: 参考链 ...

  5. vue 动态添加click_vue，在模块中动态添加dom节点，并监听

    vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...

  6. js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件

    文章目录 前言 一.场景需求还原 二.代码示例 1.引入JQuery库 2.代码示例 一:HTML中div标签部分 二:HTML中script标签部分 三:JS文件部分 总结 前言 本篇文章中讲的是在 ...

  7. vue改变class名字_vue中动态添加class类名的方法

    vue 动态添加class类名,灵活得让你发狂,下面示例几个 动态添加类名 文字的颜色) 文字的颜色) 三元表示式(文字的颜色) 文字的颜色) 文字的颜色) 通过方法设置class类名 export ...

  8. android radiogroup 添加,如何在android中动态添加textview到radiogroup

    大家好, 我们想动态地在radiogroup旁边添加textview.基于服务响应,我们需要在不使用xml的情况下将标签添加到radiogroup. 在某些情况下基于最长无线电如何在android中动 ...

  9. Unity NGUI中动态添加和删除sprite（附上转载者注释）

    --------------------- 此部分为转载的感受. 原文对于NGUI如何动态添加删除sprite,以及调用NGUI中的图集Atlas都有很明确的代码. 转载括号内容附上转载作者(Bula ...

最新文章

  1. c++一日一练：利用流来实现读和写的同步（原创）
  2. 如何从代码层面优化系统性能
  3. android新年祝福代码,讯飞输入法发布Android新春版 Biu一下敲出美好祝愿！
  4. 新手WEB开发者易出现的30个问题（转）
  5. SQL Server 负载均衡集群(转)
  6. 中文简体字-繁体字转换 WEB 服务（源代码）
  7. linux下的安装：openssl
  8. java 中free,javac(freejava)
  9. android room_Android Room –待办事项清单应用程序
  10. Solr分析器IK-analyzer配置及错误java.lang.AbstractMethodError解决
  11. dota2 服务器尚未更新到最新版本,dota2更新不动_steam dota2更新不动
  12. Dos命令查看wifi密码
  13. 编码器/译码器（Verilog HDL）|计算机组成
  14. 数据分析学习记录（四）--在origin中实现单因素方差分析和非参数检验
  15. 去中心化的联邦学习专栏
  16. 2017腾讯暑期实习生从笔试到面试总结（附带华为、阿里面试经历）
  17. mysql查询区分英文大小写_Mysql查询英文如何严格区分大小写？
  18. 何谓Palm size-PC及Pocket PC?
  19. STM32 内核复位 与 系统复位 区别及程序实现
  20. 轻松打造自己的Cheat Engine

热门文章

  1. idea配置tomcat必坑指南
  2. SQL注入(SQL注入(SQLi)攻击)攻击-注入点
  3. mysql中 !40000 DROP DATABASE IF EXISTS `top_server` 这中注释有什么作用?
  4. 设置ORACLE客户端字符集
  5. Resize Datafile时ORA-03297: 文件包含在请求的 RESIZE 值以外使用的数据
  6. 设置Linux虚拟机和主机在同一网段
  7. windows快捷键十八式（win10）
  8. 浅谈数据结构-平衡二叉树
  9. 【UML】如何看Android的UML图
  10. 机器人铁锈斑斑好吗_工业机器人系统运维员是什么职业？这个职业好吗？去哪里学？...