ExtJs 中Viewport 的使用

Ext.onReady(function()...{
Ext.QuickTips.init();
     var tree=new   Ext.tree.TreePanel(...{
    //   el:"tree"
   });

    var root=new Ext.tree.TreeNode(...{text:'项目信息'});
    var node1=new Ext.tree.TreeNode(...{
        id:'node1',
        text:"项目资料"

    });
    var node2=new Ext.tree.TreeNode(...{
        id:'node2',
        text:'标段信息'

    });
    var node3=new Ext.tree.TreeNode(...{
        id:'node3',
        text:"合同清单"

    });
    var node4=new Ext.tree.TreeNode(...{
        id:'node4',
        text:"形象清单"
      
    });
    root.appendChild(node1);
    root.appendChild(node2);
    root.appendChild(node3);
    root.appendChild(node4);
    tree.setRootNode(root);

    tree.on("click",function(node)...{
        
       /**//* var text=node.text;
        var mainPanel=Ext.getCmp("main"); //中间主Panel
        var url="";
        if(text=="项目信息") url="1.jsp";
        if(text=="项目资料") url="1.jsp";
        if(text=="标段信息") url="2.jsp";
        if(text=="合同清单") url="3.jsp";
        if(text=="形象清单") url="4.jsp";
     
        mainPanel.load({
            url:url,
            nocache:true,
            text:"正在加载中......",
            timeout:30,
            scripts:true 
        });*/
            var n;
            n = tabPanel.getComponent(node.id);
            if(n) ...{
                tabPanel.setActiveTab(n);
                return;
            }
            n = tabPanel.add( ...{
                id : node.id,
                title : node.text,
                html : iframe嵌套页面地址,
                closable : 'true'
            });
            tabPanel.setActiveTab(n);
        
        
    });
 
    var tabPanel = new Ext.TabPanel(...{
            region:"center",
               plit:true,
               border:true,
               id:"main",
            enableTabScroll : true,
            deferredRender : false,
            activeTab : 0,
            items : [ ...{
                title : 'index',
                autoLoad : 'list.jsp'
                }]
            });
    
    var accordion = new Ext.Panel(...{
        title:'系统菜单',
        region:"west",
           collapsible:true,
           width:200,
           layout:"accordion",
           layoutConfig:...{
               titleCollapse:true,
               animate:true,
               activeOnTop:false
                },
    items:[...{
               title:"第一栏",
               items:[tree]
           },...{
               title:"第二栏"
           },...{
               title:"第三栏"
           }]
    
    });
    
   var viewport=new Ext.Viewport(...{
           enableTabScroll:true,
           layout:"border",
           items:[
               accordion,
              tabPanel
       ]

   });
});