extjs viewport tree 动态切换 center

Ext.onReady(function(){
     
 //    var panel = new Ext.Panel({
 //    
 //        title:"xx",
 //        weight:400,
 //        height:400
 //    })
 //    
 //    var panel1 = new Ext.Panel({
 //    
 //        title:"dd",
 //        weight:500,
 //        height:400
 //    })
 //    
 //        var pane2 = new Ext.Panel({
 //    
 //        title:"cc",
 //        weight:400,
 //        height:400
 //    })
     
     
     new Ext.Viewport({
         
         layout: 'border',
         
         items: [{
             
             region: 'west',
             collapsible: true,
             title: 'Navigation',
             xtype: 'treepanel',
             width: 200,
             autoScroll: true,
             split: true,
             rootVisible:false,
            // loader: new Ext.tree.TreeLoader({ dataUrl: 'learn/json.js' }),
             root: new Ext.tree.AsyncTreeNode({ text: '根目录',
             children:[{text:"员工管理",leaf:true},
                 {text:"财务管理",leaf:true},
                     {text:"业务管理",leaf:true}] }),
             
             listeners: {
                 click: function(node,e) {
                     
                     var panelx = null;
                     
                     if(node.text == "员工管理"){ 
                         var panel = new Ext.Panel({
     
         title:"员工管理",
         weight:400,
         height:400
     })
                       panelx = panel;
                     }else if(node.text == "财务管理") {
                         var panel1 = new Ext.Panel({
     
         title:"财务管理",
         weight:400,
         height:400
     })
                       panelx = panel1;
                     }else if(node.text == "业务管理") {
                         var panel2 = new Ext.Panel({
     
         title:"业务管理",
         weight:400,
         height:400
     })
                       panelx = panel2;
                     }
                     
                 var tab = Ext.getCmp('main');
                 
                 if(tab.items.getCount()>0){
                     tab.remove(0);
                       alert("if" + tab.items.getCount())
                 }
                 alert("out")
                  tab.add(panelx);
                  tab.doLayout();
                
                 }
             }
     }, {
             region: 'center',
            // title:"ddd",
            // xtype: 'panel',
             id:"main",
             items:[]

     }]
 });
 });