请问在使用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
    }]
});




});