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>
[解决办法]
bug修正：
- 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(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>