Ext js Viewport实例

Ext.onReady(function() {

  //上边布局
  var topPanel=new Ext.Panel({
      region : 'north',
      title : '时效管理系统',
      html: '<img src="./images/logo.jpg" width=100% height=100%>',  
      split : true,
      height : 130, 
      minSize : 100,
      maxSize : 200,
      collapsible : true
  });
 
  //功能树
  var menu = new Ext.tree.TreePanel({
       autoScroll : true,  
        animate : true,   
        enableDD : true,   
        border : false,   
        containerScroll : true,
        rootVisible: true,
        expanded: true,  
       loader : new Ext.tree.TreeLoader({  
   dataUrl : './js/treeData.js' 
   }),   
   root : new Ext.tree.AsyncTreeNode({  
    text : '系统菜单',  
   draggable : false,  
    id : '0'  
   }),  
   listeners:{   
    'click':function(node,event){
    if (node.id == "0"){
         return;
    }
    event.stopEvent();  
     var n = MainPanel.getComponent(node.id);   
    //判断是否打开面板  
     if(!n){  
       var tabUrl = node.attributes.href;  
          n = MainPanel.add({     
                    'id':node.id,      
                    'title':node.text,     
                     closable:true, 
                     //通过html载入目标页     
                     html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+tabUrl+'></iframe>'   
                 });   
             }    
           MainPanel.setActiveTab(n);    
       }  
     }  
  });
 
  //左边布局
  var leftPanel = new Ext.Panel({  
          region : 'west',  
          title : '菜单栏',  
          id:'leftTree', 
          width : 230,    
          collapsible : true ,
          split: false,
          layoutConfig: {  
             animate: true 
          },
          items:menu
   }); 
 
  //右边布局
   var MainPanel = new Ext.TabPanel({
id : 'home',
        region: 'center',
        activeTab: 0,
        autoDestroy:false,
        listeners : {
          remove : function(tp,c){
            c.hide(); 
          }   
        }, 
items:[{
  id:'homePage',
  title:'首页',
  autoScroll:true
}]
    });
   
   var viewport = new Ext.Viewport({
         layout : 'border',
         items : [topPanel, leftPanel,MainPanel]
   });
  
});

treeData.js
[{id:2,text:'上班时间配置',href:'work.do?method=query',leaf: true},
{id:3,text:'节假日配置',href:'work.do?method=query',leaf: true},
{id:4,text:'大客户信息配置',href:'work.do?method=query',leaf:true} 
]