ExtJs 4.x 学习小记：Ext.TabPanel动态隐藏及显示

Ext.TabPanel页签关闭时，Ext.TabPanel本身已经从DOM中销毁了，但是其上的子项，比如嵌入的Grid，Panel等依然存在，如果创建时为这些子项设置了id属性，那么当你再次创建Ext.TabPanel时，就会报id重复的错误，如果不设置id，就会有内存泄露，重复创建。解决的方法网上也有但总觉得不舒服，而且每次重新创建，也会降低效率。

解决：每次关闭时，不是真正的Destory，而是隐藏，下次再显示时，直接找到它，show出来就好了。

需要设置两个属性Ext.TabPanel的autoDestroy及tab的closeAction

Ext.TabPanel

var pnCenter=new Ext.TabPanel({  id:'pnCenter',layout: 'fit',     region:'center',      autoScroll:true,     autoDestroy:false,//不让它销毁    heigth:'auto',      collapsible:false,    activTab:0,    items:[{    title:'<font color="red">任务列表<font>',    items:[Ext.getCmp('taskGrid')]    }]}); 

添加及显示Tab页

 function addTabToPanel(parentPanel,title,key,url){ var tab = Ext.getCmp(key); if (!Ext.isEmpty(tab))  //如果找到tab，将其添加到TabPanel { parentPanel.add(tab); parentPanel.setActiveTab(tab); } else { tab = parentPanel.add({ id:key, closeAction:'hide', //隐藏不关闭 title:title, closable:true, autoScroll:true,//滚动条 autoLoad:{ url:url, scripts:true } }) parentPanel.setActiveTab(tab); }  }