Ext经典布局

来源：互联网发布：java applet程序实例编辑：程序博客网时间：2024/04/30 23:04

具体步骤：

建立一个主页面main.html，主页面上除了引用ext库文件和自己编写的js文件，其他内容为空，代码如下：

<html><head><title>ExtJs</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="js-lib/ext-3.4.0/resources/css/ext-all.css"/><script type="text/javascript" src="js-lib/ext-3.4.0/adapter/ext/ext-base.js"></script><script type="text/javascript" src="js-lib/ext-3.4.0/ext-all.js"></script>
<!--自定义js文件的加载  --><script type="text/javascript" src="js/home/north.js"></script><script type="text/javascript" src="js/home/south.js"></script><script type="text/javascript" src="js/home/west.js"></script><script type="text/javascript" src="js/home/system_manage.js"></script><script type="text/javascript" src="js/home/center.js"></script><script type="text/javascript" src="js/home/main.js"></script></head> <body>     </body>  </html>

然后根据上面引用的js文件编写具体的js文件，north.js负责top部分的布局，代码如下：

//main页面top部分模块的定义var pnNorth=new Ext.Panel({      id:'pnNorth',      autoWidth:true,      heigth:80,      frame:true,      region:'north',      html:'<iframe  width= 100% height=76 frameborder=0 scrolling=no src=\'top.html\'></iframe>' });

上面通过iframe的方式使用了top.html页面，top.html页面内容自己随便编写，下面是我写的一个：

<html><head><title>ExtJs</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="js-lib/ext-3.4.0/resources/css/ext-all.css"/><script type="text/javascript" src="js-lib/ext-3.4.0/adapter/ext/ext-base.js"></script><script type="text/javascript" src="js-lib/ext-3.4.0/ext-all.js"></script><!--加载自定义的css  --><link href="css/top.css" rel="stylesheet" type="text/css"></head> <body>   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="bgtop">    <tr>      <td height="76" style="padding-left:300px">   </td>    </tr>    </table>    </body>  </html>

south.js负责bottom部分的布局，具体代码如下：

//main页面底部模块的定义var pnSouth=new Ext.Panel({      id:'pnSouth',      autoWidth:true,      heigth:80,      frame:true,      region:'south',      html:'<iframe  width= 100% height=50 frameborder=0 scrolling=no src=\'bottom.html\'></iframe>' });

上面通过iframe使用了bottom.html页面，bottom.html自己随意编写，参考如下：

<html><head><title>ExtJs</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="js-lib/ext-3.4.0/resources/css/ext-all.css"/><script type="text/javascript" src="js-lib/ext-3.4.0/adapter/ext/ext-base.js"></script><script type="text/javascript" src="js-lib/ext-3.4.0/ext-all.js"></script></head> <body>   <table width="100%" border="0" cellspacing="0" cellpadding="0">    <tr>      <td height="50" align="center">      版权信息   </td>    </tr>    </table>    </body>  </html>

west.js负责左边菜单树的生成，代码如下：

//定义树形菜单的根节点var root = new Ext.tree.TreeNode({    id:'rootNode',          text : 'root',         leaf: false //是否为叶子节点，true为是,false为否});  //定义树形菜单面板      var tp=new Ext.tree.TreePanel({         //el:"divTreePanelContent",//应用到的html元素id         animate:true,//以动画形式伸展,收缩子节点         //frame:true,         //title:"Extjs TreePanel",  //默认的title信息部写不显示       //enableDrag:true,//节点能否拖动         //collapsible:true,         rootVisible:false,//是否显示根节点         autoScroll:true,         autoHeight:true,         autoWidth:true,         border:false,         useArrows:false,//是否显示小箭头         //trackMouseOver:false,//鼠标放上去效果         //lines:true,//节点之间虚线         loader:new Ext.tree.TreeLoader(),//加载节点数据         root:root });  //定义菜单面板模块，将树形菜单加入次模块 var pnWest=new Ext.Panel({      id:'pnWest',      title:'系统菜单项',      width:200,      heigth:'auto',      split:true,//显示分隔条      region:'west',      collapsible:true,      items:[          tp      ]     });

为了降低耦合，可以通过编写单独的js文件来扩展菜单节点，通过根节点加载子节点，我写了个system_manage.js，代码如下：

var node_sysManage = new Ext.tree.TreeNode({      text : '系统管理',       iconCls : 'treeiconCls'     //url : 'bookext.do?method=showBookTypeList'   });   var user_manage=new Ext.tree.TreeNode({  id:'user_manage',   text:"用户管理",   listeners:{          'click':function(node, event) {              event.stopEvent();              var n = pnCenter.getComponent(node.id);              if (!n) {                  var p = new fnPanel();                  p.id = node.id;                  p.title = node.text;                  n = pnCenter.add(p);              }              pnCenter.setActiveTab(n);          }      }  });
//通过扩展来构建要创建的面板  fnPanel = Ext.extend(Ext.Panel, {      closable:true,      autoScroll:true,      layout:'fit', //如果用函数来创建该面板的话,布局必须设置为fit,否则不会显示该面板中的内容        //创建面板内容      createFormPanel:function() {          return new Ext.form.FormPanel({              buttonAlign:'center',              labelAlign:'right',              frame:false,              bodyBorder:false,              bodyStyle:'padding:25px',              items:[{                  xtype:'textfield',                  fieldLabel:'用户名',                  width:350,                  name:'username'              },{                  xtype:'textfield',                  fieldLabel:'密　码',                  width:350,                  name:'password'              }],              buttons:[{text:'登陆'}, {text:'取消'}]          });      },        //重装控件初始化函数,在该函数中完成面板中内容的初始化      initComponent:function() {          fnPanel.superclass.initComponent.call(this);          this.fp = this.createFormPanel();          this.add(this.fp);      }  });  
var c2=new Ext.tree.TreeNode({ id:'c2',   text:"子节点2",   listeners:{          'click':function(node, event) {              event.stopEvent();              var n = pnCenter.getComponent(node.id);              if (!n) {                  var p = new fnPanel();                  p.id = node.id;                  p.title = node.text;                  n = pnCenter.add(p);              }              pnCenter.setActiveTab(n);          }      }});node_sysManage.appendChild(user_manage);node_sysManage.appendChild(c2);root.appendChild(node_sysManage);//添加子节点 
var node_bussinessManage = new Ext.tree.TreeNode({      text : '业务管理',     iconCls : 'treeiconCls'     //url : 'bookext.do?method=showBookList'  }); var c3=new Ext.tree.TreeNode({ id:'c3',   text:"子节点3",   listeners:{          'click':function(node, event) {              event.stopEvent();              var n = pnCenter.getComponent(node.id);              if (!n) {                  var p = new fnPanel();                  p.id = node.id;                  p.title = node.text;                  n = pnCenter.add(p);              }              pnCenter.setActiveTab(n);          }      }});var c4=new Ext.tree.TreeNode({ id:'c4',   text:"子节点4",   listeners:{          'click':function(node, event) {              event.stopEvent();              var n = pnCenter.getComponent(node.id);              if (!n) {                  var p = new fnPanel();                  p.id = node.id;                  p.title = node.text;                  n = pnCenter.add(p);              }              pnCenter.setActiveTab(n);          }      }});node_bussinessManage.appendChild(c3);node_bussinessManage.appendChild(c4);root.appendChild(node_bussinessManage);//添加子节点

center.js负责中间区域内容的生成，理论上中间区域内容是动态生成的，可以再上一个js文件中编写，但也可以通过center.js编写一个中间区域的默认内容，代码如下：

//定义中心区域默认显示的内容var pnCenter=new Ext.TabPanel({      region:'center',      enableTabScroll:true,      activeTab:0,      items:[          {           id:'homePage',            title:'首页',              authHeight:true,              closable:false,//是否可关闭              html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">此处显示首页内容</div>'          }      ]  });

最后一个就是main.js，主要功能时通过ext.viewport将上面的布局信息拼装在一起，代码如下：

//main页面的初始化，主要用来加载各个模块Ext.onReady(function(){      var vp=new Ext.Viewport({          layout:"border",          items:[              pnNorth,              pnSouth,            pnWest,              pnCenter          ]      });  });

OK，到此，系统的主界面布局就出来了。