效果图:
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()