ExtJs TabPanel右键功能插件Ext.ux.TabCloseMenu

末蓝、 2022-07-28 00:10 101阅读 0赞

源码：

Ext.ux.TabCloseMenu = function () {
    	var tabs,
    	menu,
    	ctxItem;
    	this.init = function (tp) {
    		tabs = tp;
    		tabs.on('contextmenu', onContextMenu);
    	}
    	function onContextMenu(ts, item, e) {
    		ctxItem = item;
    		if (!menu) { // create context menu on first right click
    			menu = new Ext.menu.Menu([{
    							id : tabs.id + '-close',
    							text : '关闭当前',
    							handler : function () {
    								tabs.remove(ctxItem, false);
    							}
    						}, {
    							id : tabs.id + '-close-others',
    							text : '关闭其他',
    							handler : function () {
    								tabs.items.each(function (item) {
    									if (item.closable && item != ctxItem) {
    										tabs.remove(item, false);
    									}
    								});
    							}
    						}, {
    							id : tabs.id + '-close-all',
    							text : '关闭所有',
    							handler : function () {
    								tabs.items.each(function (item) {
    									if (item.closable) {
    										tabs.remove(item, false);
    									}
    								});
    							}
    						}, '-', {
    							id : tabs.id + '-closable',
    							text : '可关闭',
    							checked : true,
    							hideOnClick : ctxItem.closable,
    							handler : function () {
    								if (item.checked) {
    									ctxItem.closable = false;
    								} else {
    									ctxItem.closable = true;
    								}
    							}
    						}
    					]);
    		}
    		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());
    	}
    };
    
    Ext.preg('tabclosemenu',Ext.ux.TabCloseMenu);

使用方法：

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

注：一定要导入包含源码的js文件