这个问题困扰了我两天,现在终于解决了,拿出来分享一下!
大家看看代码:
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>"即可,
是不是很简单啊?呵呵,做不出来的时候真的很烦恼的。希望对大家有帮助啊!
分享到:
相关推荐
ExtJS的TabPanel是其组件库中的一个核心组件,用于创建具有多个标签页的应用界面,每个标签页可以承载不同的内容。在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及...
在ExtJS框架中,TabPanel布局是一种常用的组件布局方式,常用于创建带有多个标签页的应用界面,每个标签页可以承载不同的内容。在这个例子中,开发者使用了Ext3.0版本来构建一个包含多个区域(north, south, east, ...
在ExtJs中,布局管理器负责决定组件在容器中的排列方式,如fit布局、border布局、form布局等。理解这些布局模式可以帮助你构建出更灵活、适应不同屏幕尺寸的应用。 "23-Ext中的对话框.doc"文件讲解了对话框(Dialog...
ExtJS 中的 xtype.typename 介绍 ExtJS 中的 xtype 是一个非常重要的概念,它用于定义组件的类型,从而确定组件的行为和样式。xtype 是 ExtJS 的核心组件之一,它提供了大量的组件类型,满足不同场景下的需求。 ...
页面加载完毕后,EXTJS会执行`Ext.onReady`函数中指定的代码,这是EXTJS应用的一个关键启动点。例如: ```javascript Ext.onReady(function() { alert("ExtJS库已加载!"); }); ``` 这里,`Ext.onReady`函数...
17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store...
布局部分着重讲解了在ExtJS中如何对界面进行布局管理,包括各种布局类型如盒式布局、表格布局等,以适应不同的设计需求。 表格Grid部分介绍了ExtJS的网格组件Grid的创建、配置和数据绑定方法,Grid组件对于处理和...
9. **`flash`:** Flash组件,用于在页面中嵌入Flash内容,自3.0版本开始支持,通过`Ext.FlashComponent`类实现。 10. **`grid`:** 表格组件,用于展示和编辑表格数据,通过`Ext.grid.GridPanel`类实现。 11. **`...
- 面板是ExtJS中最常用的容器之一,可以包含其他组件。 - 可以设置不同的布局来控制内部组件的排列方式。 - **选项面板TabPanel**: - TabPanel是一种特殊的Panel,用于实现标签页效果。 - 可以添加多个子面板,...
1. Ext.onReady函数:在EXTJS库文件及页面内容加载完后,EXTJS会执行Ext.onReady中指定的函数。 2. 控件的使用:使用EXTJS提供的控件,如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。 三、EXTJS控件 ...
根据给定的信息,我们可以深入探讨ExtJs中Tree组件的相关知识点,包括其定义、特性以及具体的配置选项等。 ### ExtJs Tree概述 ExtJs Tree是一种基于ExtJs框架的树形控件,它允许开发者构建出复杂的数据层次结构。...
面板是ExtJS中最常用的容器之一,它可以用来组织其他组件,并且支持多种布局方式。通过设置`title`、`bodyPadding`等属性来自定义面板的样式。 #### 4.2 选项面板TabPanel TabPanel是一种特殊的面板,它包含了多...
同时,学习者将深入学习如何使用布局管理器,例如ViewPort和TabPanel,来构建响应式和多样化的用户界面。这些基础组件和布局构成了复杂Web界面的骨架,是学习ExtJS不可或缺的部分。 随着课程的推进,学习者将接触到...
- 表单及元素组件:Editor、EditorGridPanel、GridPanel、PagingToolbar、Panel、ProgressBar、SplitButton、TabPanel、TreePanel、Viewport、Window等。 EXTJS通过其强大的组件模型和丰富的API,为开发者提供了...
除了Ext.Panel,ExtJs还提供了其他两个非常有用的组件,即Ext.TabPanel和Ext.Viewport。Ext.TabPanel允许我们在面板内创建选项卡式的界面,每个选项卡可以作为一个容器,加载不同的内容。这种布局方式对于内容分组和...
使用xtype配置时,子组件不会立即实例化,而是在需要时由容器动态创建,如TabPanel中的选项卡页面,仅在用户切换到对应页面时才进行渲染,这样可以优化性能。 组件还支持显示和隐藏操作,EXTJS提供了show和hide方法...
16. `tabpanel` - `Ext.TabPanel`:选项卡面板,用于组织内容到不同的选项卡中。 17. `treepanel` - `Ext.tree.TreePanel`:树形面板,展示层次结构的数据。 18. `viewport` - `Ext.ViewPort`:视口组件,用于填充...
- `Ext.Viewport` 是EXTJS中的一个全局对象,用于全屏布局,它会占据浏览器的整个视口。 - 在示例中,`viewport` 的布局有两种类型:`fit` 和 `border`。`fit` 布局适用于只有一个子组件的情况,它会使得子组件...