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

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

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用:tab.remove(item);如果要关闭tab的所有页:
tab.items.each(function(item){
                        if(item.closable){
                            tab.remove(item);
                        }
                    }
tabs.remove(item);
没有用啊，啥提示都没出现，这个item该怎样去体现是当前项？
是不是要这种
<input type='button' value='remove' onclick='Ext.getCmp("lay").remove(Ext.getCmp("tp1"),true);alert(Ext.getCmp("tp1"));'>
没错，由于选项卡生成时并没有固定的ID，我怎么去知道ID呢？
有当前的表示法吗？
或者你加上右键菜单
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){}}(),
<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>
我是这样做的，所有要add到TabPanel的对象我都是预先构造好了，这样既方便我管理回收他们，也方便操作。
ext很消耗内存，你要是对自己生成出来的对象没有恰当的管理，很容易崩溃
       //移除当前panel
        function removeActivePanel(){
            desktop.panMain.remove(desktop.panMain.activeTab.id);
        }        在要有关闭的tabpanpl中写上
         <input type="button" onclick="window.top.removeActivePanel()" value="关闭" />