日期:2014-05-16  浏览次数:20384 次

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',  
      &nb