ExtJs TabPanel右键功能插件

 

下面是ExtJs TabPanel右键功能插件，可以全部关闭Tab，或者关闭除自己的其它Tab，可以关闭当前Tab等功能。

Ext.ux.TabCloseMenu = function(){

    var tabs, menu, ctxItem;

    this.init = function(tp){

        tabs = tp;

        tabs.on('contextmenu', onContextMenu);

    }

 

    function onContextMenu(ts, item, e){

        if(!menu){ // create context menu on first right click

            menu = new Ext.menu.Menu([{

                id: tabs.id + '-close',

                text: syscommon.closetab,

                handler : function(){

                    tabs.remove(ctxItem,false);

                }

            },{

                id: tabs.id + '-close-others',

                text:syscommon.closealltab,

                handler : function(){

                    tabs.items.each(function(item){

                        if(item.closable && item != ctxItem){

                            tabs.remove(item,false);

                        }

                    });

                }

            },{

                id: tabs.id + '-close-all',

                text: syscommon.closeothertab,

                handler : function(){

                    tabs.items.each(function(item){

                        if(item.closable){

                            tabs.remove(item,false);

                        }

                    });

                }

            }]);

        }

        ctxItem = item;

        var items = menu.items;

        items.get(tabs.id + '-close').setDisabled(!item.closable);

        var disableOthers = true;

        tabs.items.each(function(){

            if(this != item && this.closable){

                disableOthers = false;

                return false;

            }

        });

        items.get(tabs.id + '-close-others').setDisabled(disableOthers);

        var disableAll = true;

        tabs.items.each(function(){

            if(this.closable){

                disableAll = false;

                return false;

            }

        });

        items.get(tabs.id + '-close-all').setDisabled(disableAll);

        menu.showAt(e.getPoint());

    }

};

 

 

使用方法很简单：

在TabPanel上加上这句，plugins : new Ext.ux.TabCloseMenu()