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

yueyang 2008-11-03 02:40:05

通过var tabs = new Ext.TabPanel 后略
tabs.add可以增加选项卡，也可以在选项卡右上出现关闭的X按钮。
但是我想通过内部代码来控制关闭改选项卡，不知道该如何去写代码起到关闭当前的这个选项卡。
还望高手能详细指点一二。

...全文

4517 12 打赏收藏转发到动态举报

写回复

用AI写文章

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