//添加标签(标签头信息,标签显示地址)
function addtab(tabarea,text,url,pos){
var tab;
try{
if(tabcount==0){
var tabs = new Ext.TabPanel(tabarea, {//向tabarea区域添加标签
tabPosition : pos,//标签头位置 top or bottom
resizeTabs:true, //标签头自动调整大小
monitorResize:true,
minTabWidth: 20,//标签头最小为50
preferredTabWidth:120//标签头最大为150
});
tabcomm=tabs;//把标签对象副给标签全局对象
}
tabh=Ext.get(tabarea).getHeight();//得到区域的高
tabcount++;
var tabFrame = Ext.DomHelper.append(document.body, //创建一个iframe
{tag:'iframe',
id:text, //动态ID
frameBorder:0, //样式
scrolling:'auto', //滚动
src: url, //抵制
name:text,
width:'100%',
height:"100%"
});
tab = tabcomm.addTab(text,text,"",true); //向标签对象中添加新标签(对象名称,头信息,显示内容,可否关闭)
tabgetcount=tabcomm.getCount();
tab.activate();//设置当前窗体选中
tabtext=text;
tab.on('activate',function(){///得到当前标签头信息
tabtext=tabcomm.getActiveTab().getText();
<!--此处是单独处理,针对一次打开多个标签进行验证,并找其对应数组
if(document.getElementById(tabtext).src=="about:blank"){
for(var i=0;i<tabshortcut.length;i++){
if(tabshortcut[i][0]==tabtext){
document.getElementById(tabtext).src=tabshortcut[i][1];
}
}
}
-->
tabActivate(tabtext);
});
tab.setTooltip(text);//设置提示信息
tab.on('beforeclose',function(){//关闭标签事件
tabtext=tabcomm.getActiveTab().getText();//得到当前标签头信息
delArray(tabtext);
Ext.get(tabtext).remove();
tabgetcount--;
});
}catch(exception){}
}
/**
* 在新tabpanel打开页面
*/
function addTab(id,name,url,code){
var tab = Ext.getCmp('mainContent').getItem(id);
if (!tab) {
Ext.getCmp('mainContent').add({
id : id,
title : "<span style='float:left;height:21px;'>name+"</span>",
closable : true,
html : "<iframe id='iframe_" + id + "' scrolling='auto' border='0' frameborder='0' marginwidth='0' marginheight='0' width='100%' height='100%' onload='unPageMask()'></iframe>"
}).show();
//由于IE6是无法解析创建iframe前指定的src属性,所以这里在创建iframe之后再指定路径;如果直接在iframe中指定src,在ie6下会出现空白页面
//document.getElementById("iframe_" + id).src= url;
window.frames["iframe_" + id].location.href =url;
} else {
// 如果tab已存在,则刷新并切换至
window.frames["iframe_" + id].location.reload();
tab.show();
}
pageMask();
分享到:
相关推荐
在这个“Extjs4 tab 基本选项卡及增删插入操作”的主题中,我们将深入探讨如何使用ExtJS 4来管理TabPanel的选项卡,包括创建、删除和插入操作。 首先,让我们了解TabPanel的基本配置和选项: 1. **创建TabPanel** ...
在EXTJS 6.x 中,`Ext.Tab.Panel` 是一个常用的组件,用于创建带有选项卡的布局,每个选项卡代表一个独立的视图或窗口。 在EXTJS 4.x 中,存在一种常见的用户交互模式,即双击选项卡来关闭该选项卡。然而,随着...
动态向选项卡组件中添加一个选项卡元素。 flush(string | number) 刷新选项卡元素的内容 将选项卡元素的内容刷新,参数可以为选项卡元素的ID或下标。 show(string | number) 显示选项卡元素 显示制定选项卡元素,...
在EXTJS中,`tabpanel` 是一个非常常用的组件,它用于展示多个页面或者视图,每个页面或视图被封装在一个选项卡中。在某些情况下,我们可能需要限制`tabpanel`中同时显示的选项卡数量,以保持界面的简洁性和易用性。...
这篇博客“利用eval()函数给树节点统一添加单击事件实现新建选项卡功能”探讨了一个具体的JavaScript编程技巧,如何通过eval()函数来处理用户交互,特别是针对树形结构数据的点击事件,进而实现新的选项卡功能。...
这个教程可能涵盖了如何创建和配置TabPanel,包括添加选项卡、设置选项卡样式、处理选项卡切换事件等内容。 4. **《TutorialWhat is that Scope all about (Chinese)》** “Scope”在JavaScript中是一个关键概念,...
为了让Tab选项卡具有交互性,我们需要添加JavaScript代码。这段代码的作用是当用户点击某个标题时,会切换相应的列表显示状态。 ```javascript window.onload = function() { var menu = document.getElementById...
例如,使用jQuery的fadeIn()和fadeOut()方法,可以为选项卡切换添加平滑过渡效果,增强视觉吸引力。 至于Android,虽然不是Web开发技术,但考虑到标签中有提及,我们可以推测这可能是讨论如何在Android应用中实现...
这个"Extjs 通用后台模板| 经典 Tree+Tab+Grid"是一个基于ExtJS的预配置模板,它集成了常见的界面元素,如树形视图(Tree)、选项卡(Tab)和网格(Grid),为开发高效能、用户友好的后台应用提供了便利。...
本主题主要关注的是ExtJs 中的一个常见布局模式:左侧树形导航与中心Tab选项卡结合的后台通用界面布局。 首先,我们要理解ExtJs中的“布局”(Layouts)。布局是ExtJs组件管理其子组件的方式,决定了子组件如何在...
5. **TabbedPane(选项卡面板)**: TabbedPane允许在一个区域内展示多个面板,每个面板对应一个选项卡,用户可以通过点击不同的选项卡切换内容。 6. **Window(窗口)**: Window组件可以用来弹出浮动的对话框,支持...
- **Tabs类**: 查看`Ext.tab.Tab`类的所有可用配置,了解如何进一步自定义选项卡。 ### 总结 通过以上内容的学习,我们不仅了解了如何使用Ext JS创建基本的UI组件,还掌握了如何构建更复杂的用户界面,如选项卡式...
在压缩包中的"ExtTreeTab"可能表示一个包含树形结构和选项卡功能的组件。在用户列表实例中,它可能被用来展示用户组或者层级关系的用户。树形结构用于显示层次关系,而选项卡则可以用来分类或分组用户。 总结起来,...
**TabPanel** 是ExtJS中的一个常用组件,可以用来组织多个面板或视图,每个面板可以通过选项卡的形式进行切换展示。在本例中,我们将重点介绍如何在TabPanel中的GridPanel(表格面板)中根据不同条件动态改变行的...
这个框架利用EXTJS的强大组件模型,允许用户通过点击树形节点在中心区域打开新的选项卡,展示相应的功能或内容。 1. **树形结构**:EXTJS的TreePanel组件用于构建树形结构。在这个例子中,树形结构的每个叶子节点...
- 打开项目的属性设置,找到“JavaScript Build Path”,点击“Libraries”选项卡。 - 选择“Add External JARs”,浏览并选中之前下载的ExtJS库文件,例如`ext-all-debug.js`或`ext-all.js`,点击“OK”确认添加。 ...