Ext 学习(3)为tabpanel标签页添加右键菜单
效果图：
?
?
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()
?
