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代码

   

       

   

//几个参数说明
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()