Ext.TabPanel右键关闭panel窗口: 在ext 的例子里有

最新推荐文章于 2021-02-16 09:37:58 发布

华子w908925859

最新推荐文章于 2021-02-16 09:37:58 发布

阅读量3.3k

点赞数

分类专栏： java技术文章标签： EXT HTML

本文链接：https://blog.csdn.net/mr_lili_111/article/details/83922295

版权

java技术专栏收录该内容

81 篇文章 1 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Advanced Tabs</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" >
//src="../ux/TabCloseMenu.js"
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({
items: [{
id: tabs.id + '-close',
text: 'Close Tab',
handler : function(){
tabs.remove(ctxItem);
}
},{
id: tabs.id + '-close-others',
text: 'Close Other Tabs',
handler : function(){
tabs.items.each(function(item){
if(item.closable && item != ctxItem){
tabs.remove(item);
}
});
}
}]});
}
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);
e.stopEvent();
menu.showAt(e.getPoint());
}
};
Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);
</script>
<script type="text/javascript" >
Ext.onReady(function(){

var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});

// tab generation code
var index = 0;
while(index < 7){
addTab();
}
function addTab(){
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>',
//+ Ext.example.bogusMarkup,
closable:true
}).show();
}

new Ext.Button({
text: 'Add Tab',
handler: addTab,
iconCls:'new-tab'
}).render(document.body, 'tabs');
});

</script>


<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>

<div id="tabs" style="margin:15px 0;"></div>
</body>
</html>

华子w908925859

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext.TabPanel右键关闭panel窗口: 在ext 的例子里有

Advanced Tabs //src="../ux/TabCloseMenu.js"Ext.ux.TabCloseMenu = function(){ var tabs, menu, ctxItem; this.init = function(tp){ ...
复制链接

扫一扫

专栏目录