Ext.TabPanel右键关闭panel窗口: 在ext 的例子里有
<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" />
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!--<link rel="stylesheet" type="text/css" href="tabs-example.css" />-->
<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>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<!--<script type="text/javascript" src="../shared/examples.js"></script> EXAMPLES -->
<div id="tabs" style="margin:15px 0;"></div>
</body>
</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" />
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!--<link rel="stylesheet" type="text/css" href="tabs-example.css" />-->
<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>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<!--<script type="text/javascript" src="../shared/examples.js"></script> EXAMPLES -->
<div id="tabs" style="margin:15px 0;"></div>
</body>
</html>