啥也不说了，直接上代码：
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
<scripttype="text/javascript"src="../adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../ext-all.js"></script>
<styletype="text/css">
*{font-size:12px;line-height:130%;}
.list{list-style:square;width:500px;padding-left:16px;}
.listli{padding:2px;font-size:8pt;}
pre{
font-size:11px;
}
.x-tab-panel-body.x-panel-body{
padding:10px;
}
/*defaultloadingindicatorforajaxcalls*/
.loading-indicator{
font-size:8pt;
background-image:url('../resources/images/default/grid/loading.gif');
background-repeat:no-repeat;
background-position:left;
padding-left:20px;
}
.new-tab{
background-image:url(../examples/feed-viewer/images/new_tab.gif)!important;
}
.tabs{
background-image:url(../examples/desktop/images/tabs.gif)!important;
}
</style>
<title>TabsDemo</title>
</head>
<body>
<scripttype="text/javascript">
Ext.onReady(function(){
vartabs=newExt.TabPanel({
renderTo:Ext.getBody(),
resizeTabs:true,//turnontabresizing
minTabWidth:115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:150,
defaults:{autoScroll:true},
plugins:newExt.ux.TabCloseMenu(),
tbar:[{text:'新建Tab',iconCls:'new-tab',handler:addTab}]
});
//tabgenerationcode
varindex=0;
while(index<2){
addTab();
}
functionaddTab(tab){
if(tabs.items.length>9){
Ext.MessageBox.alert("提示","最多只能新建10个tab!");
//tabs.tbar.setVisible(false);
returnfalse;
}
tabs.add({
title:'NewTab'+(++index),
iconCls:'tabs',
html:'TabBody'+(index),
closable:true
}).show();
}
});
//右键弹出菜单
Ext.ux.TabCloseMenu=function(){
vartabs,menu,ctxItem;
this.init=function(tp){
tabs=tp;
tabs.on('contextmenu',onContextMenu);
}
functiononContextMenu(ts,item,e){
if(!menu){//createcontextmenuonfirstrightclick
menu=newExt.menu.Menu([{
id:tabs.id+'-close',
text:'关闭当前',
handler:function(){tabs.remove(ctxItem);}
},{
id:tabs.id+'-close-others',
text:'关闭其它',
handler:function(){
tabs.items.each(function(item){
if(item.closable&&item!=ctxItem){
tabs.remove(item);
}
});
}
}]);
}
ctxItem=item;
varitems=menu.items;
items.get(tabs.id+'-close').setDisabled(!item.closable);
////只剩一个时，禁止关闭
//if(tabs.items.length==1){
//items.get(tabs.id+'-close').setDisabled(true);
//}
vardisableOthers=true;
tabs.items.each(function(){
if(this!=item&&this.closable){
disableOthers=false;
returnfalse;
}
});
items.get(tabs.id+'-close-others').setDisabled(disableOthers);
menu.showAt(e.getPoint());
}
};
</script>
</body>
</html>
效果图如下:
欢迎加入:http://www.itpob.cn/bbs
分享到：
相关推荐
这个学习笔记涵盖了从基础到高级的多个主题，帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明： 1. **ExtJs 结构树**：这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树，包括...
ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记(十五)---Ext.data.Model ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记...
13. **extJs 2.0学习笔记**：这部分内容可能包含与2.1版本相关的进阶主题，如Ajax的使用、Ext.data的相关知识、Ext.Panel的深入研究、事件注册、组件总论、Element API的总结以及DomHelper和ext.js的使用方法。...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
本学习笔记将深入探讨ExtJS 2.1的关键概念和技术，帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中，应用程序通常基于组件树构建，每个组件都有自己的属性、方法和事件。理解这种结构对于布局...
通过本篇学习笔记，我们可以了解到如何使用ExtJs的面板控件，并通过一些简单的例子来展示它们的基本用法。这些基础知识是构建复杂ExtJs应用程序的基石。学习和掌握Ext.Panel、Ext.TabPanel和Ext.Viewport的使用方法...
根据给定的文件信息，我们可以深入探讨两个关键的Extjs组件——Tab Panel（标签页控件）和Grid（表格控件）。这两个控件是Extjs框架中非常实用且功能丰富的部分，广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...
本资源包含ExtJs的API文档、笔记以及示例，帮助开发者深入理解和使用ExtJs。 首先，API文档是ExtJs开发的基础，其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考，有助于开发者...
- **ExtJs2.0学习笔记(Ext.Panel终结篇)**：深入探讨了`Ext.Panel`组件的各种特性和用法。 - **ExtJs2.0学习笔记(事件注册总结篇)**：总结了Ext JS 2.0中事件处理的相关知识，包括事件监听、触发等。 - **ExtJs2.0...