关于extjs中动态添加TabPanel的tab项并以iframe显示的整理

最新推荐文章于 2023-05-23 22:35:14 发布
最新推荐文章于 2023-05-23 22:35:14 发布
阅读量1w 收藏 3
点赞数
分类专栏： JavaScript 文章标签： iframe extjs stylesheet html tabs url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bonnibell/article/details/4880619
版权

      近来的项目中用到了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>

 

 

 

bonnibell
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
extjs4.x tabpanel 动态加载panel和html例子
09-11
js代码，实现了 extjs4.x tabpanel 动态加载panel和html的功能
[EXTJs]TabPanel动态生成,加载组件时,组件不能正常显示的解决办法
lu_pp的专栏
06-27 5887
我的需求是点击左侧导航栏时,能在右侧动态生成TabPanel,并且TabPanel中包含一些组件.发现如果仅仅是tbar就没什么问题然后要求增加一个GridPanel,就发现GridPanel无法显示,只有将浏览器的窗口大小改变,才会显示.原因:感谢 纵横纳财tabPanel大小没定经过查找,找到解决方案: var tab = tabPanel.add({ layout:fit,//tabpa
extjs里写html页面跳转页面跳转,extjs4 tabpanel动态加载html里面exths写的panel，但是panel就出不来， 切换一下别的panel再切换就自动显...
weixin_42372963的博客
06-03 227
这个是动态添加html的代码html叫mix.html：variCom=Ext.create('Ext.panel.Panel',{title:'mix',closable:true,sidebarChange:true,loader:{autoLoad:true,url:'mix.html',scripts:true}});tabpanel.add(iCom);tabpa...
ExtJS4.X TreeStore,TreePanel 动态加载菜单和Tab页
taolinsen的专栏
10-30 1684
前面一篇文章实现了业务系统的整体布局(《ExtJS4.X Boder 布局实现系统页面框架》)，接下来我们来实现一个经常使用的菜单，前台不用说当然是使用Ext，后台代码使用C#，最终实现了一个动态加载菜单并且点击菜单后实现Tab页的加载。 首先说下treestore的数据结构，treestore就是treepanel的本地构建的数据源 01 var sto
Extjs 4 tabpanel动态加载reconfigure的grid
weixin_34384557的博客
06-04 254
Ext.onReady(function(){ var store = Ext.create('Ext.data.Store',{ fields : ['name', 'seniority', 'department'], groupField : 'department', data:{'employees':[{"name":"Michael", "seniorit...
extjs动态添加tabpanel标签页支持pannel嵌入
08-14
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
extjs 列表框(multiselect)的动态添加列表项的方法
10-29
最近公司一个项目,因为要使用div模拟的窗口,因为久闻extjs的大名,因此就想在项目中使用一下.首先下载了multiselect的extjs3.0 demo.看到的代码这里我就不粘贴了.
extJs中关于formPanel动态添加组件的验证问题
04-13
NULL 博文链接：https://627443183-qq-com.iteye.com/blog/1725391
Extjs中通过Tree加载右侧TabPanel具体实现
10-27
用Extjs4.1来做界面，有关Extjs4.1资料在网上也相对来说较少，下面是具体的实现代码1.左侧的功能树2.需要打开的对应的view，有类似需求的朋友可以参考下哈
ExtJS动态添加和删除tab标签实例
jazywoo_在路上
07-24 2666
ExtJS中的标签在网页中经常用到，它可以将已有的div布局成tab切换的形式，也可以全新生成tab切换布局。它在ExtJS中的全称是Ext.tab.Panel，xtype是tabpanel，功能比较丰富，如动态添加tab，动态删除tab等等。下面给出一个例子，包括生成tabpanel、点击按钮添加tab并激活tab、点击按钮删除激活状态的tab。 　　生成tabpanel： var
Extjs 在Tab中使用Iframe
weixin_30545285的博客
11-06 76
在Tab中不是很好实用Iframe，提供两种参考方式：一：单一的tab,每次左边的tree的node事件都会更新的。先创建一个拥有HTML的标签CodenewExt.TabPanel({id:'main-tabs',activeTab:0,region:'center',...
[Ext JS3.9] 标签面板（TabPanel ）介绍与开发
oscar999的专栏
05-23 610
标签面板是RIA 类应用使用较多的组件， 因为其可以显示的内容比较多。
tabpanel 使用问题
zha_zi的专栏
10-25 131
extJS4.2.0 tabPanel学习（三）
weixin_33860528的博客
05-28 97
了解添加tab的函数这里设置为自动添加，菜单是从后台获取的数据，前台进行双击的时候，添加tab页12345678910111213141516171819202122232425262728293031323334353637383940414243Ext.define('MVC.controller.MainController', {    extend: 'Ext.app.Controlle...
Ext中tabPanel加载页面总结
iteye_9657的博客
12-14 428
通常情况下，最好，速度最快的方法是在TabPanel的Items属性中设置autoLoad： autoLoad:{ url:'a.jsp', scripts:true } 但如果被加载的页面a.jsp中有Ext.OnReady()方法的话，则无法显示OnReady中加载的界面，所以只能用iframe进行加载，也就是第二种方法： frame:tru...
【ExtJs】tabPanel标签页与修改标签页的内容
编程记录，亲测有效
04-24 5790
标签页是一个很重要的插件，正如《【mfc】标签页》（点击打开链接）在VC6中的地位，通过ExtJs中能够在网页中轻松地实现一个与客户端一模一样的标签页。 一、基本目标 创建如下的标签页，在底部的工具栏有两个按钮，一个可以增加标签页，增加的标签的内容就是当前的时间。这里只作为例子，一般标签页里面的内容，是放个iframe,或者通过无参数传递的ajax直接从别的网页中取，避免在javasc
TabPanel多标签tab页加载同一个GridPanel显示不同的数据
sky08050025的专栏
04-07 9811
<br />     前几天做了一个功能实现，在一个tabpanel上的多个tab标签存放同一个数据源里的的不同的数据，其中tab标签的title为自动生成的。其中存放数据里的容器为GridPanel，因为是同一个GridPanel，所以store是唯一一个，如里每个tab页都存放一个GridPanel的话，就需要同等量的store，这里会很麻烦。页面效果如下图：<br /> <br />其中，每个tab页里存放的不同的数据，加载数据的方式也为异步加载，点击事件触发时，加载数据。<br />上面四个tab标
Ext TabPanel学习(2)-动态添加TabPanel标签
smile_wlxt的博客
07-25 965
1)、动态添加TabPanel标签效果图[img]http://dl2.iteye.com/upload/attachment/0087/3623/63f28aa2-fa06-3b5a-8dff-1163f1830325.png[/img]js代码：Ext.onReady(function(){    Ext.QuickTips.init();    var tabsDemo = new Ext....
extjs中，为textarea组件添加功能，可以显示每行的行号
最新发布
06-13
可以使用 Ext JS 的 `textareafield` 组件，并结合 CSS 样式实现每行显示行号的功能。具体实现步骤如下： 1. 在 CSS 中设置 `textarea` 的 `line-height` 为每行的高度，可以根据需要设置行高度。 ```css .x-form-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值