效果图:
js代码:
Ext.onReady(function(){
Ext.QuickTips.init();
var tabsDemo = new Ext.TabPanel({
renderTo:Ext.getBody(),
// resizeTabs:true,//宽度能自动变化,但是会影响标题的显示
activeTab:0,
height:200,
enableTabScroll:true,//挤得时候能够滚动收缩
width:400,
frame:true,
//下面是新增的关键右键菜单代码
listeners:{
//传进去的三个参数分别为:tabpanel(tabsDemo),当前标签页,事件对象e
"contextmenu":function(tdemo,myitem,e) {
var menu = new Ext.menu.Menu([{
text:'关闭当前页',
handler:function(){
tdemo.remove(myitem);
}
},{
text:'关闭其他所有页',
handler:function() {
tdemo.items.each(function(item){
if(item.closable && items!=myitem) {
//可以关闭的其他标签页全部关闭
tdemo.remove(item);
}
})
}
},{
text:'新建标签页',
handler:addTab
}]);
//显示在当前位置
menu.showAt(e.getPoint());
}
},
items:[{
title:'页面演示',
html:'原来就有的标签页面'
}]
});
//添加函数add()
var index = 0;
function addTab() {
tabsDemo.add({
title:'ntab'+index,
id:'newtab'+index,
html:'new tab'+index,
closable:true
});
tabsDemo.setActiveTab("newtab"+index);
index++;
}
new Ext.Button({
text:'添加新标签页',
handler:addTab
}).render(document.body,"addBtn");
})
html代码
<body>
<div>
<div id="addBtn"></div>
</div>
</body>
//几个参数说明
1.enableTabScroll:true//前面已经说过了
//右键菜单事件,三个参数分别为当前tabpanel,当前标签页panle,时间对象e
2. listeners:{"contextmenu":function(参数1,参数2,参数3){.}}
3.//扩充2,每个标签页都有激活和去激活事件 activate和deactivate,他们的执行函数有个参数,就是当前标签页。
例如:
items:[{
title:"tab advantage",
listeners:{
deactivate:function(a){alert("删除,a表示当前标签页");},
activate:function(){alert("激活");}
},
html:"sample1"
}]
//menu组件,就不多说了,后面会专门分析下,不过不要忘记menu.showAt(e.getPoint());了
4.menu=new Ext.menu.Menu()
相关推荐
在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及自定义菜单等高级功能。 首先,让我们了解TabPanel的基本结构。在ExtJS中,TabPanel是一个容器,可以包含多个Panel...
总的来说,这个例子演示了如何使用ExtJS创建一个复杂的多区域布局,并在其中嵌套TabPanel组件,同时展示了如何定制TabPanel的行为,如标签页的自动调整、滚动以及右键菜单功能。这种布局方式在实际开发中非常常见,...
9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.1.4...
它基于 Ext.js 库构建,提供了超过 100 种工具,包括 TextBox、ComboBox、Button、ToolBar、StatusBar、Panel、TabPanel、ExplorerBar、MenuBar、PictureBox 等多种控件,并且支持 Ajax 无刷新效果。这些特性使得 ...
10.2 标签页右键菜单TabCloseMenu 276 10.3 面板最大化MaximizeTool 278 10.4 分页设置PageSizePlugin 282 10.5 行数据扩展RowExpander 284 10.6 本章小结 290 第五部分 调试 第11章 调试 292 11.1 测试Ext.Element...
9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.2...
- **用途**: 实现多标签页界面,便于组织大量信息。 **Ext.tree.TreePanel** - **描述**: 树型面板,用于展示层次结构的数据。 - **用途**: 文件系统、目录结构的可视化表示。 **Ext.FlashComponent** - **描述**:...
- **标签弹出菜单**:为选项卡添加右键菜单以增强功能性。 #### 第二十八章:Viewport类 - **概述**:解释Viewport类的作用及其在应用布局中的位置。 - **Viewport的基本使用**:展示如何使用Viewport类来创建主...