EXT 点击左边的Tree，在右侧显示出Tree节点所指定的页面 _Ajax

EXT 点击左边的Tree，在右侧显示出Tree节点所指定的页面 - Web 开发 / Ajax
请问各位，我用border布局一个页面，左侧是一个TreePanel，中间是一个Panel,上边也是一个panel,我想实现点击TreePanel节点，在中间的Panel中显示节点所指示的页面，应该如何做？
代码如下：

JScript code


Ext.onReady(function() {
    var root = new Ext.tree.TreeNode({
        id:"root",
        text:"系统菜单"
    });
    root.appendChild(new Ext.tree.TreeNode({
        id:"company",
        text:"企业管理",
        href:'AddCompany.html',
        hrefTarget:'center'
    }));
    root.appendChild(new Ext.tree.TreeNode({
        id:"dept",
        text:"部门管理"
    }));
    root.appendChild(new Ext.tree.TreeNode({
        id:"use",
        text:"用户管理"
        //icon:'user_female.png' 更换图标
    }));
    root.appendChild(new Ext.tree.TreeNode({
        id:"speark",
        text:"留言管理"
    }));
    root.appendChild(new Ext.tree.TreeNode({
        id:"chat",
        text:"聊天管理"
    }));

    var menuTree = new Ext.tree.TreePanel({
        root:root,
        width:180
    });
    //整体布局：使用Border区域布局(该布局把容器分成东南西北中五个区域，由east,south,west,north,center来表示)
//    
    
    //处于center的panel
    var centerPanel = new Ext.TabPanel({
        //items:[{title:"企业管理",closable:true},{title:"部门管理",closable:true},{title:"用户管理",closable:true}],activeItem:0
    });
    var fram = new Ext.Viewport({
        enableTabScroll:true,
        layout:"border",
        items:[
        //{region:"north",height:80,headerAsText:false,html:"<img align=center src=./image/TopImage.jpg>",collapsible:true},
        {region:"north",bodyStyle: "background-color:#dfe8f6; border-width: 0px 2px 0px 0px;",height:75,headerAsText:false,html:"<br><h1 align=center>客服管理系统后台</h2>",collapsible:true},
        {region:"west",headerAsText:false,width:180,autoScroll:true,title:"系统菜单",items:[menuTree],collapsible:true}, 
        //{xtype:"tabpanel",region:"center",items:[{title:"企业管理",closable:true},{title:"部门管理",closable:true},{title:"用户管理",closable:true}],activeItem:0}
        {region:"center",items:[centerPanel]}
        ]
        
    });
    
     menuTree.on('click', function (node){  
         if(node.isLeaf()) {
            var width = Ext.getCmp("centerPanel").getWidth();
            Ext.Msg.alert(width);
         }
    }); 
     
    fram.setTitle('<center>title</center>');
    fram.show();
}
);

小弟先在此谢谢各位了！

------解决方案--------------------

JScript code


{
                        id : 'content-panel',
                        region : 'center',
                        layout : 'card',
                        margins : '2 5 5 0',
                        activeItem : 0,
                        border : false,
                        items : [start, p_company, p_user, p_dept, p_duty,
                                p_subject, p_category, p_book, p_simple_book]
                    }

------解决方案--------------------

我也遇到这个问题了。能帮忙改一下吗？说的具体点，不太懂！谢谢