tab在ext里很常用,在点开N个tab后,是否能通过右键菜单,关闭全部tab或关闭除此以外的全部tab,当然可以,使用Ext.ux.TabCloseMenu插件就可以轻松实现。
Ext.onReady(function(){
//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: '关闭标签',
handler : function() {
tabs.remove(ctxItem);
}
},{
id: tabs.id + '-close-others',
text: '关闭其他标签',
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);
menu.showAt(e.getPoint());
}
};
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:45
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),{
region:'west',
id:'west-panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:"<?php echo $ui['ui_sys_menu_caption'];?>",
collapsible :true,
layoutConfig:{
animate:true
},
items: [
<?php echo $str;?>
]
},
tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
items:[{
iconCls:'desk',
title:"title"
}],
plugins: new Ext.ux.TabCloseMenu()
})
]
});
});
Ext.ux.TabCloseMenu插件的使用
最新推荐文章于 2021-02-01 03:25:43 发布