extjs4tabPanel面板激活的问题

代码：treePanel：
var menuTree = Ext.create('Ext.tree.Panel', {
height: 1000,
rootVisible: false,
store: menuStore,
listeners: {
itemclick: function(view, rec, item, index, e) {
if (rec.get('leaf')){
var id = rec.get('id');
var text = rec.get('text');
var url = rec.get('url');
if (Ext.getCmp(id)) {
Ext.Msg.alert("提示","此选项面板已经打开！");
}
else {
addTab(id, text, url);
}
}
}
}
});tabPanel:
var tabs = Ext.widget('tabpanel', {
     activeTab: 0,
        resizeTabs: true,
        enableTabScroll: true,
        width: '100%',
        height: '100%',
        defaults: {
            autoScroll: true,
            bodyPadding: 5
        },
        items: [{
            id: '1',
            title: '欢迎',
            iconCls: 'tabs',
            icon: "images/tabs.gif",
            autoLoad: {url: "welcome.jsp", method:'post', loadMask: 'loading...', scripts:true},
            closable: false
        }]
});addTab：
function addTab(id, text, url) {
tabs.add({
  id: id,
    closable: true,
    autoLoad: {url: url, method:'post',scripts:true},
iconCls: 'tabs',
icon: "images/tabs.gif",
    title: text
}).show();
}问题描述：添加面板是可以成功的，但是在关闭面板的时候总是激活第一个面板。
比如：我一共打开的4个面板1,2,3,4，当前激活的是第二个面板，我关闭第三个面板，应该不影响还是激活第二个面板，
如果关闭的是当前激活的面板，就应该激活上一次激活的面板。但是我一点击关闭，就会跳到第一个面板，纠结了好几天，哎。。
试了下官网的例子程序，addTab的那个程序好像也有点问题，tab overflow menu的例子效果达到了，就是不知道怎么转到我的程序上。高手出来帮帮忙啊

解决方案 »

  1.   

    在配置项里给每个面板配上id，
    用一个全局变量或者全局对象的成员保存激活面板的id序列（按激活的先后顺序存入数组就可以），
    切换面板或关闭面板时更新该id序列（切换面板时push一个id，关闭时移除所有该面板的id），
    关闭当前面板时从序列中拿出上一次激活的面板id，用activate方法激活该面板。OK了
      

  2.   

    能把关键代码贴出来看看吗，或者发一份小例子到我邮箱吧，谢谢了。[email protected]
      

  3.   

    代码测试无误
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
                        <link type="text/css" href="/ext/resources/css/ext-all.css" rel="Stylesheet" />
                        <script type="text/javascript" src="/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all-debug.js"></script>
        <title>无标题页</title>
    </head>
    <script type="text/javascript">
      Ext.onReady(function(){
         var panels=new Array();
      for(var i=0;i<=5;i++)
      {
        panels.push({id:'panel'+i,title:'面板'+i,closable:true,
            listeners:{close:function(){
              removeId(this.id);
              if(this.id==tabPan.getActiveTab().id)
              {
                var newid=actIndexs[actIndexs.length-1];
                tabPan.setActiveTab(newid);
              }
           }}
        });
      }
      
      
        var tabPan=new Ext.TabPanel({renderTo:'div1',width:800,height:400,items:panels,
          listeners:{tabchange:function(par1,par2){
            actIndexs.push(par2.id);
          }}
        });
        tabPan.show();
      });
      var actIndexs=new Array();
      function removeId(panId)
      {
        for(var i=0;i<=actIndexs.length-1;i++)
        {
          if(actIndexs[i]==panId)
          {
            actIndexs.splice(i,1);
          }
        }
      }
    </script>
    <body>
        <form id="form1" runat="server">
        <div id='div1' style="margin-top:100px;">
        
        </div>
        </form>
    </body>
    </html>
      

  4.   

    bug修正：<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
                        <link type="text/css" href="/ext/resources/css/ext-all.css" rel="Stylesheet" />
                        <script type="text/javascript" src="/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all-debug.js"></script>
        <title>无标题页</title>
    </head>
    <script type="text/javascript">
      Ext.onReady(function(){
         var panels=new Array();
      for(var i=0;i<=5;i++)
      {
        panels.push({id:'panel'+i,title:'面板'+i,closable:true,
            listeners:{close:function(){
              removeId(this.id);
              if(tabPan.getActiveTab() && this.id==tabPan.getActiveTab().id)
              {
                var newid=actIndexs[actIndexs.length-1];
                if(newid) tabPan.setActiveTab(newid);
              }
           }}
        });
      }
      
      
        var tabPan=new Ext.TabPanel({renderTo:'div1',width:800,height:400,items:panels,
          listeners:{tabchange:function(par1,par2){
            if(par2) actIndexs.push(par2.id);
          }}
        });
        tabPan.show();
      });
      var actIndexs=new Array();
      function removeId(panId)
      {
        for(var i=0;i<=actIndexs.length-1;i++)
        {
          if(actIndexs[i]==panId)
          {
            actIndexs.splice(i,1);
          }
        }
      }
    </script>
    <body>
        <form id="form1" runat="server">
        <div id='div1' style="margin-top:100px;">
        
        </div>
        </form>
    </body>
    </html>