extjs4tabPanel面板激活的有关问题-JavaSript-爱易网页

extjs4tabPanel面板激活的有关问题

日期：2014-05-16　浏览次数：20371 次

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的例子效果达到了，就是不知道怎么转到我的程序上。

高手出来帮帮忙啊。。。。。。。。。

------解决方案--------------------
在配置项里给每个面板配上id，
用一个全局变量或者全局对象的成员保存激活面板的id序列（按激活的先后顺序存入数组就可以），
切换面板或关闭面板时更新该id序列（切换面板时push一个id，关闭时移除所有该面板的id），
关闭当前面板时从序列中拿出上一次激活的面板id，用activate方法激活该面板。OK了
------解决方案--------------------
用算法了，我也是这么做的，用堆栈来设计就可以。。。
------解决方案--------------------
代码测试无误

HTML code

<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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

extjs4tabPanel面板激活的有关问题

相关资料更多>

推荐阅读更多>