请问在使用viewport组件时,如果我在"west"区中放置了菜单,如何在点击菜单后让对应的内容页面显示在"center"区?

以下是我的代码
Ext.onReady(function(){

var mainMenu=new Ext.Panel({//创建一个面板
//renderTo:'mainMenu',//填充到id为show的区域
//title:'我的可折叠菜单',
width:160,
height:500,
layout:'accordion',//声明布局类型

layoutConfig: {
animate: true //动画效果启用
},

items:[{
title:'菜单1',
html:'<a href="http://www.baidu.com" >菜单1的内容</a>'//这里可用div，方便其他元素插入

}, {
title:'菜单2',
html:'菜单2的内容'
}]
});




var viewport = new Ext.Viewport({
layout:'border',
items:[{
title: ' ',
region: 'north',
contentEl: 'north-div',
split: true,
border: true,
collapsible: true,
height: 100,
minSize: 50,
maxSize: 100
},

/*
{
title: 'south',
region: 'south',
contentEl: 'south-div',
split: true,
border: true,
collapsible: true,
height: 50,
minSize: 50,
maxSize: 120
},

{
title: 'east',
region: 'east',
contentEl: 'east-div',
split: true,
border: true,
collapsible: true,
width: 120,
minSize: 120,
maxSize: 200

},
*/
{
title: '我的菜单',
region: 'west',
contentEl: 'west-div',
split: true,
border: true,
collapsible: true,
width: 160,
minSize: 160,
maxSize: 160,
items:[mainMenu]
},{
title: 'center',
region: 'center',
contentEl: 'center-div',
split: true,
border: true,
collapsible: true
}]
});




});