效果图:
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()
相关推荐
jquery实现新建TabPanel选卡窗口以及右键菜单功能实例
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
extjs4.2.1 tabPanel刷新及关闭标签
竖向标签TabPanel-------------------------------------------------
NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
NULL 博文链接:https://rowen.iteye.com/blog/446163
treepanel 和 tabpanel 合在一起使用,可直接使用
如何在MATLAB中做出标签页的效果-tabpanel2.6.zip 刚才看到有会员朋友说matlab中控件少,math说ActiveX中多的是啊,于是我也就顺便打开ActiveX看看里面都有什么。突然看到个单词tabbed……难道这就是困扰我多日的...
解决Ext中tabPanel关闭后再次打开的2种方式。详情见文件,很小的txt文本。
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
TabPanel的使用,添加tab,加载页面,添加事件
ext的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...
tapestry4.02中封装ext的TabPanel组件
动态添加菜单按钮到Toolbar 61 更方便的是 61 下一步是 62 模板(Templates)起步 62 第一步 您的HTML模板 62 第二步,将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式化功能 63 正式开始 63 下...
1、Ext.TabPanel简单使用 代码:
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
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...
NULL 博文链接:https://icyfire.iteye.com/blog/412574
6.5. 脑袋上有几个标签的tabPanel 6.6. 让布局复杂一点儿 7. 低鸣吧!拖拽就像呼吸一样容易。 7.1. 如此拖拽,简直就像与生俱来的本能一样。 7.2. 第一!乱拖。 7.3. 第二!代理proxy和目标target 8. 哭泣吧!...