`

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 TabPanel 标签操作

    ExtJS的TabPanel是其组件库中的一个核心组件,用于创建具有多个标签页的应用界面,每个标签页可以承载不同的内容。在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及...

    TabPanel布局

    在ExtJS框架中,TabPanel布局是一种常用的组件布局方式,常用于创建带有多个标签页的应用界面,每个标签页可以承载不同的内容。在这个例子中,开发者使用了Ext3.0版本来构建一个包含多个区域(north, south, east, ...

    ExtJs + api + 笔记 + 完整包

    在ExtJs中,布局管理器负责决定组件在容器中的排列方式,如fit布局、border布局、form布局等。理解这些布局模式可以帮助你构建出更灵活、适应不同屏幕尺寸的应用。 "23-Ext中的对话框.doc"文件讲解了对话框(Dialog...

    extjs中的xtype的所有类型介绍

    ExtJS 中的 xtype.typename 介绍 ExtJS 中的 xtype 是一个非常重要的概念,它用于定义组件的类型,从而确定组件的行为和样式。xtype 是 ExtJS 的核心组件之一,它提供了大量的组件类型,满足不同场景下的需求。 ...

    EXTJS学习文档 适合初学者

    页面加载完毕后,EXTJS会执行`Ext.onReady`函数中指定的代码,这是EXTJS应用的一个关键启动点。例如: ```javascript Ext.onReady(function() { alert("ExtJS库已加载!"); }); ``` 这里,`Ext.onReady`函数...

    ExtJS 2.0实用简明教程

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

    ExtJS快速入门指南.pdf

    布局部分着重讲解了在ExtJS中如何对界面进行布局管理,包括各种布局类型如盒式布局、表格布局等,以适应不同的设计需求。 表格Grid部分介绍了ExtJS的网格组件Grid的创建、配置和数据绑定方法,Grid组件对于处理和...

    extJs xtype 类型

    9. **`flash`:** Flash组件,用于在页面中嵌入Flash内容,自3.0版本开始支持,通过`Ext.FlashComponent`类实现。 10. **`grid`:** 表格组件,用于展示和编辑表格数据,通过`Ext.grid.GridPanel`类实现。 11. **`...

    EXTJS实用开发指南_个人整理笔记.pdf

    1. Ext.onReady函数:在EXTJS库文件及页面内容加载完后,EXTJS会执行Ext.onReady中指定的函数。 2. 控件的使用:使用EXTJS提供的控件,如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。 三、EXTJS控件 ...

    ExtJs Tree

    根据给定的信息,我们可以深入探讨ExtJs中Tree组件的相关知识点,包括其定义、特性以及具体的配置选项等。 ### ExtJs Tree概述 ExtJs Tree是一种基于ExtJs框架的树形控件,它允许开发者构建出复杂的数据层次结构。...

    ExtJs2.0简明教程

    面板是ExtJS中最常用的容器之一,它可以用来组织其他组件,并且支持多种布局方式。通过设置`title`、`bodyPadding`等属性来自定义面板的样式。 #### 4.2 选项面板TabPanel TabPanel是一种特殊的面板,它包含了多...

    EXTJS实用开发指南

    - 表单及元素组件:Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、Viewport、Window等。 EXTJS通过其强大的组件模型和丰富的API,为开发者提供了...

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

    除了Ext.Panel,ExtJs还提供了其他两个非常有用的组件,即Ext.TabPanel和Ext.Viewport。Ext.TabPanel允许我们在面板内创建选项卡式的界面,每个选项卡可以作为一个容器,加载不同的内容。这种布局方式对于内容分组和...

    基础到实战ExtJs全程精通培

    此外,还详细讲解了布局方式,如ViewPort和TabPanel,以及FormPanel、TreePanel、GridPanel等关键组件的使用。这些组件是构建复杂Web界面的基础,它们提供了丰富的交互性和数据展示能力。 在数据交互方面,课程涵盖...

    EXTjs组件.pdf

    使用xtype配置时,子组件不会立即实例化,而是在需要时由容器动态创建,如TabPanel中的选项卡页面,仅在用户切换到对应页面时才进行渲染,这样可以优化性能。 组件还支持显示和隐藏操作,EXTJS提供了show和hide方法...

    extjs xtype

    16. `tabpanel` - `Ext.TabPanel`:选项卡面板,用于组织内容到不同的选项卡中。 17. `treepanel` - `Ext.tree.TreePanel`:树形面板,展示层次结构的数据。 18. `viewport` - `Ext.ViewPort`:视口组件,用于填充...

    搜集来的ext布局材料

    - `Ext.Viewport` 是EXTJS中的一个全局对象,用于全屏布局,它会占据浏览器的整个视口。 - 在示例中,`viewport` 的布局有两种类型:`fit` 和 `border`。`fit` 布局适用于只有一个子组件的情况,它会使得子组件...

Global site tag (gtag.js) - Google Analytics