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

源码:

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文件


你可能感兴趣的:(Extjs)