Treepanel和Tabpanel搭配的一点注意事项

经过自己的测试，实现treepanel点击节点，将页面加载到tabpanel中。

其中，有几个注意点：

1、tabpanel中的监听事件不能使用通常的beforeclose、close事件如果是监听tabpanel的话，可以用beforeremove，如果是想监听具体的tab页，只能用beforedestroy事件。具体原因不明，网上查了很多也没查到一个明了的说法。这个结论是调试后得出的。

 

2、由于tabpanel页签上我设置了closable=true，因此有一个关闭功能，但是在ExtJs中，如果直接关闭tabpanel中的tab页，在打开同一个页签，会造成内存的泄露。因此，我在这边的处理是，直接进行监听，使用beforeremove。设置隐藏的语句为：tabpanel.hideTabStripItem(tab); 显示的语句为：tabpanel.unhideTabStripItem(tab);

其他的方法，我试验过setVisible，但是效果不好，会造成其他的报错，最终使用了上述的方法。

 

 

 

js代码：

 

function getMainTree()
{
 var node = new Ext.tree.AsyncTreeNode({
  text:'root'
 });
 
 var treeloader = new Ext.tree.TreeLoader({
  url:'../WebForm1.aspx'
 });
 
 var tree = new Ext.tree.TreePanel({
  root:node,
  rootVisible:false,
  loader:treeloader
 });
 
 tree.on('click', function(node, event){
  //debugger;
  //alert(node.text);
  var tabpanel = Ext.getCmp('mainCenterPanel');
  var tab = Ext.getCmp('tabPanel_'+node.id);
        var frameUrl = '';
       
        //判断是否是叶子节点。是，新增tab页，加载右侧iframe；否，return
        if(!node.leaf)
        {
      return;
     }
        //第一次创建
        if(!tab)
     {
      //debugger;
         tabpanel.add({
    border: false,
                title : node.text,
                id : 'tabPanel_'+node.id,
                layout : 'fit',
                iconCls: 'tabs',
                closable:true,
                //html:'<div>'+node.text+'</div>',
                html:'<iframe id="tabCommandDetail" style="width:100%; height:100%" src=' + frameUrl + '></iframe>',
                closable : true   
            });
                     
  }
  else
  {
   //debugger;
   
   //重新刷一次iframe
   //frames['tabCommandDetail'].src="";
   //frames['tabCommandDetail'].src=frameUrl;
   
   //显示tab页签
   tabpanel.unhideTabStripItem(tab);
  }
  tabpanel.setActiveTab(tab);
 });
 
 return tree;
}

function getTabPanel()
{
 var panel = new Ext.TabPanel({
  id:'mainCenterPanel',
  autoDestroy: true,
  resizeTabs:true,
  enableTabScroll:true,
  defaults: {autoScroll:true},
  activeTab:0,
  items:[{
   //id:'test',
   title:'欢迎进入'
  }]
 });
 
 panel.on('beforeremove', function(t,p){
  //alert(1);
  //debugger;
  //隐藏t(tabpanel)中的p(tab)页签
  t.hideTabStripItem(p);
  
  return false;
 });
 
 return panel;
}

function createMainPort(power)
{
 //if(power == "admin")
 //{
 var mainTree = getMainTree();
 var mainPanel = getTabPanel();
 var mainView = new Ext.Viewport({
  layout:'border',
  rendered:'divMain',
  items:[
  {
   region:'north',
   layout:'fit',
   height:56,
   html:'<iframe id="mainHeaderFrame" style="width:100%;height:56px" src="mainHeader.htm" ></iframe>'
  },
  {
   region:'west',
   title:'管理中心',
   split:true,
   collapsible:true,
   width:160,
   layout:'accordion',
   items:[
    {
     layout:'fit',
     title:'网站管理',
     items:mainTree
     
    },{
     title:'会员管理'
    },{
     title:'网站设置'
    },{
     title:'菜单4'
    },{
     title:'菜单5'
    }
   ]
  },
  {
   region:'center',
   layout:'border',
   items:[
    {
     region:'north',
     //title:'关于这个的简介',
     height:25,
     layout:'fit',
     items:[
      new Ext.Toolbar({
       items:['->', '-', {text:'用户'}, '-', {text:'级别'}, '-']
      })
     ]
     
    },{
     region:'center',
     //title:'详细内容'
     //layout:'fit'
     items:mainPanel
    }
   ]
  }]
 });
}

createMainPort();