此文来源于:K.N.J's blog
想要解决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(); }
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>
问题描述: 添加面板是可以成功的,但是在关闭面板的时候总是激活第一个面板。 比如:我一共打开的4个面板1,2,3,4,当前激活的是第二个面板,我关闭第三个面板,应该不影响还是激活第二个面板,如果关闭的是当前激活的面板,就应该激活上一次激活的面板。 但是我一点击关闭,就会跳到第一个面板,试了下官网的例子程序,addTab的那个程序好像也有点问题,tab overflow menu的例子效果达到了....................
..........................................
........................阅读全文,请点击:解决extjs4tabPanel面板激活的问题
更多阅读:
1.用JavaScript让div居中的解决方法
2.怎样使cookie在网页中显示出来?