请教一个extjs布局问题！

这是index页面的代码，页面采用extjs viewport来布局的。
西面版显示的是树形菜单，中心区域是tabpanel

JScript code

//index.js
var viewport = new Ext.Viewport({
                        layout : 'border',
                        items : [
                                /** 北面板, 定义在 north.js */
                                northRegion,
                                /** 南面板, 定义在 south.js */
                                southRegion,
                                /** 西面板, 定义在 west.js */
                                westRegion,
                                /** 中心面板 ******************************* */
                                centerRegion
                                /**东面板,定义在 east.js**/
//                                eastRegion
                                ]
                    });

//center.js
var centerRegion = new Ext.TabPanel({
            region : 'center',
            deferredRender : false,
            activeTab : 7,
            enableTabScroll : true,
            listeners : {
                remove : function(tp, c) {
                    c.hide();
                }
            },
            autoDestroy : false,
            items : [
                welcomePanel,welcomePanel2,welcomePanel3,welcomePanel4,
                 welcomePanel5,welcomePanel6,welcomePanel7,welcomePanel8,
                 welcomePanel9,welcomePanel10,welcomePanel11
            ]
        });

//west.js
// 定义并构造西部面板
/** *********浏览器树菜单start*********** */
var rootNode = new Ext.tree.AsyncTreeNode({
            text : "根",
            id : "0",
            expanded : true
        });

var myTree = new Ext.tree.TreePanel({
            root : rootNode,
            loader : new Ext.tree.TreeLoader({
                        dataUrl : "/Ext/tree"
                    }),
//            width : 200,
//            autoHeight : true
            height:600
        });

myTree.on("beforeload", function(node) {
            myTree.loader.baseParams.id = node.id;
        });

myTree.on("click", function(node) {
            Ext.Ajax.request({
                        url : "/Ext/tree",
                        params : {
                            id : 1
                        },
                        success : function(res) {
                            var r = Ext.decode(res.responseText);
                            // alert(r);
                        }
                    });
        });

// tree.render(Ext.get("tree_div"));
/** *********浏览器树菜单end*********** */

var westRegion = {
    region : 'west',
    id : 'west-panel',
    iconCls : 'tabs',
    title : '节点浏览器',
    split : true,
    width : 200,
    minSize : 175,
    maxSize : 400,
    autoScroll: true,
    border:false,
    collapsible : true,
    margins : '0 0 0 5',
    layout : 'column',
    layoutConfig : {
        animate : true
    },
    items : [{
        items : myTree
    }
    ]
};

现在我想通过左侧的菜单栏来控制中心区域的tabpanel，就是说点击菜单栏中的一项，就会切换不同的tabpanel来显示在中心区域。希望大家帮忙看看怎么做，有没有更适合这种需求的布局方式？

JScript code

 var inStoreTree=new Ext.tree.TreePanel({
       root:inStoreRootNode,
       rootVisible:false,//是否显示根节点   
       autoScroll:true,   
       autoHeight:true, 
       border:false,
       split: true,   
       width:200,   
       lines:true//节点之间连接的横竖线 
   });
   inStoreTree.on('click', treeClick);//给inStoreTree添加treeClick方法
function treeClick(node, e) {
       if(node.isLeaf()){
           var main=Ext.getCmp('main');//main就是右边主面板的id
        main.add({
         xtype:'panel',
         title:node.attributes.text,
         id:'tab'+node.attributes.id,
         autoScroll:true,
         autoLoad:{url:node.attributes.url,scripts:true},
        closable:true
     }).show();
       }
   }
//说明下，我的treenode是直接写死的，在前台就指定了url,你的treenode如果是从后台加载的话，就可以在点击节点的时候，获取url属性就可以了。