ext viewpoint简单例子

来源：互联网发布：fdd lte网络编辑：程序博客网时间：2024/06/11 21:15

以建立一个的简单的后台管理模板为例子（样式如下）：

1、必要的引用

其中local为语言包，resources为ext UI包， ext-all.js则为核心库，shared则是当涉及多个框架的时候使用。
2、新建一个html测试页面加入必要的引用

Html代码  
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">  
<script type="text/javascript" src="ExtJS/ext-all-debug.js"></script>  

3、初始化一个viewpoint

Html代码  
Ext.onReady(function() {  
   var viewport = Ext.create('Ext.Viewport', {  
    id: 'border-example',  
    layout: 'border',  
    items: [  
     pnNorth,  
     pnWest,  
     pnCenter  
    ]  
   });  
  });    

viewpoint，顾名思义就是一个页面，其中包含的小页面则是items中显示的东西，这里我们应该先定义好每一个items对应是那种类型的component，一般的管理后台都是上边一个显示欢迎页面Panel，左边是一个下拉树显示所有的菜单Panel，右边则根据鼠标点击左边的哪个菜单莱尼显示不同的页面，对应的是tab.Panel）

接下来就是就是定义每个panel了，共三个north，west ，center，位置则是在属性region中定义；

Html代码  
            
//首先定义好每个panel中包含什么item  
var itemWest_sys=[{  
   title: 'Management',  
   itemId:'mgId',  
   iconCls: 'nav' // see the HEAD section for style used  
  }, {  
   title: 'Tiemsheet',  
   collapsed : false,//default to render it expand,default:true(collapsed)  
   itemId:'tsId',  
   html: 'Some settings in here.  
',  
   iconCls: 'settings'  
  }];  
  //center item  
  var itemCenter=[{  
   title: 'Index',  
   itemId:'indexId',  
   autoScroll: true,  
   html:'<iframe src="main.html" frameBorder=0 ></iframe>'  
  }];  
//初始化每个panel  
//region-north  
  var pnNorth=new Ext.Panel({  
   id:'pnNorth',    
   autoWidth:true,    
   heigth:40,    
   margins: '0 5 0 10',  
   padding:'0 0 0 30',  
   frame:true,  
   region:'north',  
   html:'<h1>Hello Timesheet Management System</h1>'  
  });  
  //region-west  
  var pnWest=new Ext.Panel({  
   id:'pnWest',  
   region:'west',  
   title:"west",  
   split: true,  
   width: 200,  
   minWidth: 175,  
   maxWidth: 400,  
   collapsible: true,  
   animCollapse: true,  
   margins: '0 0 0 10',  
   layout: 'accordion',  
   items: itemWest_sys  
  });  
  //region-center  
  var pnCenter=Ext.create('Ext.tab.Panel', {  
   region: 'center', // a center region is ALWAYS required for border layout  
   deferredRender: false,  
   margins: '0 5 0 0',  
   activeTab: 0, // first tab initially active  
   items:itemCenter  
  });  

每个panel中还可以包含其他的panel，在items中定义。
例如左边的菜单需要根据数据库返回来的数据进行动态加载：
首先将数据进行组装，然后再调用add()方法进行动态的加入；

Html代码  
    
var test={title: 'Index',  
   itemId:'indexId',  
   autoScroll: true,  
   closable:true,  
   html:'<h1>Test for item add</h1>'   
  };//组转格式  
pnAdd.add(test );  

4、整个页面的源码

Html代码  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
    "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">  
    <script type="text/javascript" src="ExtJS/ext-all-debug.js"></script>  
 <script type="text/javascript">  
      
  //--------------系统全局变量-------  
  //west sys item  
  var itemWest_sys=[{  
   title: 'Management',  
   itemId:'mgId',  
   iconCls: 'nav' // see the HEAD section for style used  
  }, {  
   title: 'Tiemsheet',  
   collapsed : false,//default to render it expand,default:true(collapsed)  
   itemId:'tsId',  
   html: 'Some settings in here.  
',  
   iconCls: 'settings'  
  }];  
  //center item  
  var itemCenter=[{  
   title: 'Index',  
   itemId:'indexId',  
   autoScroll: true,  
   html:'<iframe src="main.html" frameBorder=0 ></iframe>'  
  }];  
    
  //添加树-------data tree test  
  var tree_include = Ext.create('Ext.data.TreeStore', {  
   root: {  
    expanded: true,  
    children: [  
     { text: "detention", leaf: true },  
     { text: "homework", expanded: true, children: [  
      { text: "book report", leaf: true },  
      { text: "algebra", leaf: true}  
     ] },  
     { text: "buy lottery tickets", leaf: true }  
    ]  
   }  
  });  
  var tree=Ext.create('Ext.tree.Panel', {  
   title: 'Simple Tree',  
   itemId:"treeId",  
   width: 200,  
   height: 150,  
   store: tree_include,  
   rootVisible: false,  
   renderTo: Ext.getBody()  
  });  
    
  //region-north  
  var pnNorth=new Ext.Panel({  
   id:'pnNorth',    
   autoWidth:true,    
   heigth:40,    
   margins: '0 5 0 10',  
   padding:'0 0 0 30',  
   frame:true,  
   region:'north',  
   html:'<h1>Hello Timesheet Management System</h1>'  
  });  
  //region-west  
  var pnWest=new Ext.Panel({  
   id:'pnWest',  
   region:'west',  
   title:"west",  
   split: true,  
   width: 200,  
   minWidth: 175,  
   maxWidth: 400,  
   collapsible: true,  
   animCollapse: true,  
   margins: '0 0 0 10',  
   layout: 'accordion',  
   items: itemWest_sys  
  });  
  //region-center  
  var pnCenter=Ext.create('Ext.tab.Panel', {  
   region: 'center', // a center region is ALWAYS required for border layout  
   deferredRender: false,  
   margins: '0 5 0 0',  
   activeTab: 0, // first tab initially active  
   items:itemCenter  
  });  
    
  //Ext.require(['*']);  
  Ext.onReady(function() {  
   var viewport = Ext.create('Ext.Viewport', {  
    id: 'border-example',  
    layout: 'border',  
    items: [  
     pnNorth,  
     pnWest,  
     pnCenter  
    ]  
   });  
  });  
    
  //函数---------添加item---------  
  function addItem(itAdd,pnAdd){  
   var rtn=pnAdd.getComponent(itAdd.itemId);  
   if(rtn==null){  
    pnAdd.add(itAdd);  
   }else{  
    pnAdd.setActiveTab(rtn);  
   }  
  }  
  /* var test={title: 'Index',  
   itemId:'indexId',  
   autoScroll: true,  
   closable:true,  
   html:'<h1>Test for item add</h1>'   
  };  
  addItem(test,pnCenter);  
  addItem(test,pnWest); */  
    </script>  
    <title>Welcome to Hello Timesheet Management System</title>  
</head>  
<body>  
  
 <div id="west" class="x-hide-display">  
        Hi. I'm the west panel.  
  
    </div>  
  
 <div id="center1" class="x-hide-display">  
        I can close ;I am pennal One  
 </div>  
 <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">  
    </div>  
</body>  
</html>  

以上就是使用ExtJS制作的一个简单的后台管理模型；

0 0