高手看过来:extjs 中如何关闭TabPanel中的选项卡页

yueyang 2008-11-03 02:40:05
通过var tabs = new Ext.TabPanel 后略
tabs.add可以增加选项卡,也可以在选项卡右上出现关闭的X按钮。
但是我想通过内部代码来控制关闭改选项卡,不知道该如何去写代码起到关闭当前的这个选项卡。
还望高手能详细指点一二。
...全文
4038 点赞 收藏 12
写回复
12 条回复
xiaochengfu1 2011年04月15日
六楼正解,我这边也是这样做的,还有你生成的时候加上固定的id,这样会方便以后操作
回复 点赞
Fing_king 2011年04月15日

//移除当前panel
function removeActivePanel(){
desktop.panMain.remove(desktop.panMain.activeTab.id);
}

在要有关闭的tabpanpl中写上
<input type="button" onclick="window.top.removeActivePanel()" value="关闭" />
回复 点赞
sunxing007 2008年11月26日
ext很消耗内存, 你要是对自己生成出来的对象没有恰当的管理,很容易崩溃
回复 点赞
sunxing007 2008年11月26日
我是这样做的,所有要add到TabPanel的对象我都是预先构造好了,这样既方便我管理回收他们, 也方便操作。
回复 点赞
xelnagan 2008年11月26日
高手都是 看来我还需要好好学习啊
回复 点赞
Ghost_520 2008年11月05日

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>华中电力科技开发公司电网事业二部短信群发平台</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" media="all" href="resources/css/examples.css" />
<script type="text/javascript" src="scripts/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="scripts/ext/examples.js"></script>
<script type="text/javascript" src="scripts/ext/RowExpander.js"></script>

<script>
// sets default ExtJS blank image
Ext.BLANK_IMAGE_URL = "../resources/images/default/s.gif";
Ext.QuickTips.init(); // 开启表单提示
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var name = "liubin";

Ext.onReady(function(){
var maincontent = new Ext.TabPanel({
id:"mainPanel",
renderTo:document.body,
region:'center',
margins:'0 5 0 0',
width:400,
height:300,
deferredRender:false,
autoScroll:true,
enableTabScroll:true,
activeTab:0,
items:[
{
id:"tabIndex",
html:"<img src='images/webroot/background_copy.jpg' width=100% height=100%>",
title: '首页',
style:"padding:1px;",
// closable:true,
autoScroll:true,
closable:true
}
],
buttons:[
{
text:"关闭",
listeners:{
click:function(){
Ext.getCmp("mainPanel").remove(Ext.getCmp("tabIndex"));
}
}
}
]
})
})

</script>
</body>
</html>
回复 点赞
LCKKING 2008年11月05日
或者你加上右键菜单
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);
}
});
}
},{
id: tabs.id + '-close-all',
text: '关闭所有页',
handler : function(){
tabs.items.each(function(item){
if(item.closable){
tabs.remove(item);
}
});
}
},{
id: tabs.id + '-close-all',
text: '取 消'
}]);
}
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());
}
};

//---------------------------------------
//在生成时加个
plugins: function (){try{return new Ext.ux.TabCloseMenu();}catch(e){}}(),
回复 点赞
LCKKING 2008年11月05日
你生成的时候就加上固定的id嘛
回复 点赞
yueyang 2008年11月03日
没错,由于选项卡生成时并没有固定的ID,我怎么去知道ID呢?
有当前的表示法吗?
回复 点赞
大王带我来巡山 2008年11月03日
是不是要这种
<input type='button' value='remove' onclick='Ext.getCmp("lay").remove(Ext.getCmp("tp1"),true);alert(Ext.getCmp("tp1"));'>
回复 点赞
yueyang 2008年11月03日
tabs.remove(item);
没有用啊,啥提示都没出现,这个item该怎样去体现是当前项?
回复 点赞
LCKKING 2008年11月03日
用:tab.remove(item);

如果要关闭tab的所有页:
tab.items.each(function(item){
if(item.closable){
tab.remove(item);
}
}



回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告