近来的项目中用到了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显示的整理的更多相关文章

  1. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  2. VC中动态添加控件

    VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...

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

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

  4. Android 在程序中动态添加 View 布局或控件

    有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...

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

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

  6. 谨记给UpdatePanel中动态添加的控件赋ID

    原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...

  7. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  8. html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）

    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...

  9. Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务

    Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...

随机推荐

  1. 【转】Ubuntu搭建Eclipse+JDK+SDK的Android

    原文网址:http://blog.csdn.net/ithomer/article/details/6960989 今晚重装Ubuntu系统,重新安装了一套eclipse+jdk+SDK的Androi ...

  2. android adb应用

    一 adb 简介 ADB是一个 客户端-服务器端 程序, 其中客户端是你用来操作的电脑, 服务器端是android设备. 二 安装 方法 先说安装方法, 电脑上需要安装客户端. 客户端包含在sdk里. ...

  3. 正确理解 AsyncTask，Looper,Handler三者之间的关系(基于android 4.0)

    Looper 和Handler 是理解好AsyncTask的一个基础,我们可以先从这里开始,先给出一个主线程和子线程互相通信的例子. package com.example.loopertest; i ...

  4. 使用Nodejs+mongodb开发地图瓦片服务器

    原先地图瓦片服务器采用的是arcgisserver发布的地图服务并进行切片,但ags发布的地图服务很占内存,发布太多的话服务器压力很大.再一个就是ags价太高了. 学习Nodejs之后,发现这是一个可 ...

  5. Linux makefile教程之书写规则三[转]

    书写规则———— 规则包含两个部分,一个是依赖关系,一个是生成目标的方法.在 Makefile中,规则的顺序是很重要的,因为,Makefile中只应该有一个最终目标,其它的目标都是被这个目标所连带出来 ...

  6. 转：使用 JMeter 完成常用的压力测试

    使用 JMeter 完成常用的压力测试 就目前 Java EE 的平台下开发的软件来说,这种节点通常可能是:Web 服务器.数据库服务器和 JMS 服务器.它们都是请求主要发生的地点,请求频率较其它的 ...

  7. Selenium2Library系列 keywords 之 _ElementKeywords

    #公有方法: (1)current_frame_contains(self, text, loglevel='INFO') (2)current_frame_should_not_contain(se ...

  8. Nginx gzip配置详解

    gzip决定是否开启gzip模块param:on|offexample:gzip on; gzip_buffers 设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间param1:intp ...

  9. <转>揭秘DNS后台文件：DNS系列之五

    揭秘DNS后台文件 在前面的博文中我们介绍了DNS的体系结构,常用记录,还介绍了辅助服务器的配置,今天我们来介绍一下DNS服务器背后的几个文件.其实DNS服务器的工作完全依靠这几个文件,了解了DNS的 ...

  10. 《Linux设备驱动程序》 笔记1

    驱动程序的任务 通常来讲,驱动(模块)要执行两类任务: 模块中的某些函数作为系统调用的一部分执行(按照既定规则填补必需的系统调用模块) 其他函数负责终端处理 内核中的并发 为什么考虑并发问题: Lin ...