`

ExtJS中新增tabpanel加载其它完整页面(viewport布局中)

阅读更多

这个问题困扰了我两天,现在终于解决了,拿出来分享一下!

大家看看代码:

 

tree1.on('click',function(node){
    	var id=node.id;
    	var tab=Ext.getCmp('auto');
    	if(node.text == "个人资料"){
	       if(id=='information'){
	       		var tabItem=Ext.getCmp('form_information');
	       		if(tabItem==null){
					tabItem=tab.add(new Ext.Panel({
						id:"form_information",
						title:"基本信息",
						closable:true,
						autoScroll:true,
						frame:true,
						items:[{
							showMask: true,
							maskMsg: '正在加载  ',
							scripts:true,
							html:" <iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='http://localhost:8080/HH/test.html'> </iframe>"
						}]
					}));
					tab.setActiveTab(tabItem);
				}
				else{
					tab.setActiveTab("form_information");
				}
	       		
	        }else{
	        	Ext.MessageBox.alert("error");
	        }
    	}
    	else if(node.text == "在校情况"){
    		 if(id=='schoolinfo'){
    		 	
    		 }
    	}
    });

 

 关键在:

 

tabItem=tab.add(new Ext.Panel({
						id:"form_information",
						title:"基本信息",
						closable:true,
						autoScroll:true,
						frame:true,
						items:[{
							showMask: true,
							maskMsg: '正在加载  ',
							scripts:true,
							html:" <iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='http://localhost:8080/HH/test.html'> </iframe>"
						}]
					}));

 不要用autoLoad,加载后总是出现页面混乱。现在只需要把它换成html:" <iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='http://localhost:8080/HH/test.html'> </iframe>"即可,

是不是很简单啊?呵呵,做不出来的时候真的很烦恼的。希望对大家有帮助啊!

 

0
2
分享到:
评论
1 楼 zm8859001 2016-04-13  
不错,我也遇到这样的问题了!autoLoad,加载后总是出现页面混乱

相关推荐

    ExtJS 2.0实用简明教程

    17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)

    轻松搞定Extjs_原创

    这是我花费数月写的关于Extjs的原创教程,共29个章节。下面是目录: 目 录 1 第一章:序 6 第二章:准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章:Ext ...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    ExtJs2.0简明教程

    ……24 5.8 Table布局及其它布局……….……………………………………………………………………………..………..35 第六章 使用表格控件Grid……….…………………………………………………………………………...

    tree with tab

    extjs 左边窗口treepanel 菜单与右边窗口tabpanel 交互 var westPanel = Ext.create('Ext.tree.Panel', { title : '菜单', region : 'west', margins : '0 5 0 0', width : 200, store : store1, ...

    ExtJS快速入门指南.pdf

    一、ExtJS 框架简介...............................................................................................................3 二、如何使用Ext.........................................................

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    基于extjs的.NET3.5控件Coolite 1.0.0.34580 (Preview预览版), *************************************************** * Version 1.0.0 升级日志 * *************************************************** 1. ...

    EXT2.0中文教程

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者列表 ...

    Ext 开发指南 学习资料

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 A.9. 有关grid的一些小问题 A.9.1. 如何让grid总所有的列都支持排序 A.9.2. 修改一个grid的ColumnModel和Store A.9.3. 动态为ds添加参数baseParams A.10. 有关...

    EXT教程EXT用大量的实例演示Ext实例

    TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省 C.2. 关于ext与dwr整合部分的讨论 C.3. 怎么看文档附件里的范例 D. 贡献者...

Global site tag (gtag.js) - Google Analytics