ExtJS的panel问题

[破折号]

我现在只想模仿EXT文档的那种形式，可以在左边点击菜单，右边用tabpanel显示内容!

/*这里是Default页面*/
///<reference path="vswd-ext_2.0.2.js" />
Ext.MyViewport=Ext.extend(Ext.Viewport ,{
    xtype:"viewport",
    layout:"border",
    initComponent: function(){
        this.items=[
            new Ext.Panel({                    
                title:"操作菜单",
                region:"west",
                width:220,
                autoWidth:false
            }),
            {
                id:'mainPanel',
                xtype:"tabpanel",
                activeTab:0,
                region:"center",
                items:[
                    {
	                    xtype:"panel",
	                    title:"今天汇总"
                    }
                ]
            }
        ]
        Ext.MyViewport.superclass.initComponent.call(this);
    }            
})

/*这里是左侧菜单Left.htm，将它放在‘操作菜单’这个panel中*/

///<reference path="vswd-ext_2.0.2.js" />
Ext.onReady(function(){
    //订餐部分
    var order=new Ext.tree.TreeNode({
        id:"order",
        href:"http://www.baidu.com",
        hrefTarget:"_self",
        text:"Soid订餐"});
    var a1 = new Ext.tree.TreeNode({
        id:"a1",
        href:"http://www.google.cn",
        hrefTarget:"_blank",
        text:"我要订餐"
    });
    var a2 = new Ext.tree.TreeNode({
        id:"a2",
        href:"http://www.google.cn",
        hrefTarget:"_blank",
        text:"管 理 员"
    });
    order.appendChild(a1);
    order.appendChild(a2);
    var orderTree=new Ext.tree.TreePanel({
        renderTo:"tree1",
        root:order,
        width:200
        });
    orderTree.on("click",function(node,event){
        alert("您点击了"+node.text);
    });
    a1.on("click",function(node,event){
        alert(node.text);
    });

    //查询过去订单
    var query=new Ext.tree.TreeNode({
        id:"query",
        href:"http://www.baidu.com",
        hrefTarget:"_self",
        text:"订单查询"});
    var b1 = new Ext.tree.TreeNode({
        id:"b1",
        href:"http://www.google.cn",
        hrefTarget:"_blank",
        text:"今日订单"
    });
    var b2 = new Ext.tree.TreeNode({
        id:"b2",
        href:"http://www.google.cn",
        hrefTarget:"_blank",
        text:"历史订单"
    });
    query.appendChild(b1);
    query.appendChild(b2);
    var queryTree=new Ext.tree.TreePanel({
        renderTo:"tree2",
        root:query,
        width:200
        });
    queryTree.on("click",function(node,event){
        alert("您点击了"+node.text);
    });
    b1.on("click",function(node,event){
        alert(node.text);
    });               
});

怎么去实现？

[leehuat]

  id:'mainPanel',
                xtype:"tabpanel",
                activeTab:0,
                region:"center",
                id: 'mainTab',
                items:[
                    {
                        xtype:"panel",
                        title:"今天汇总",
                        items: {
			       html: new Ext.ux.IFrameComponent({id:'main-iframe'})'
                        }
                    }
                ]

 
  order.on('click',function(node){
       var tabs = Ext.get('mainTab');
       Ext.getCmp('main-iframe').el.dom.src=node.href;
       tabs.setActiveTab(0);
   });
    //下面依次监听tree事件