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);
 	} 	
 }