请教一个extjs布局问题！

Question

这是index页面的代码，页面采用extjs viewport来布局的。
西面版显示的是树形菜单，中心区域是tabpanel
//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来显示在中心区域。希望大家帮忙看看怎么做，有没有更适合这种需求的布局方式？

Answer 1

 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属性就可以了。