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:[]

    }]
});
});