首页 > 代码库 > 使用Extjs组件实现Top-Left-Main布局并且增加事件响应
使用Extjs组件实现Top-Left-Main布局并且增加事件响应
每次在毕业答辩会上，看到同专业的同学只要是XXX管理系统，就是下图所示的界面，看来这中布局还是很受欢迎的（偷笑）。接下来进入我们正题，在web项目无论是前端还是后台管理比较常见的布局就是Top-Left-Main。如图所示：
在平常的接触中，也见到了很多类似的前端框架，例如smartadmin，bootstrap-admin等，在今天我给大家介绍一种更加简洁的构建方式。
项目源码地址：https://github.com/zhangxy1035/extjs
参考资料：http://extjs-doc-cn.github.io/ext4api/#!/api
项目展示：
在该项目中界面界面的分类布局都是使用的extjs的panel完成的，主要代码如下：
1 //顶部2 var topPanel = Ext.create(‘Ext.panel.Panel‘,{3 region:‘north‘,///指定top方向4 border:false,5 height:80,6 contentEl:‘top‘,//在网页中需要用id进行接收7 margins:‘0 0 0 0‘8 });
本身来讲大家所看到的left面板其实就是extjs中所提到的树，接下来，我们将具体谈谈如何生成这棵树。
官方代码如下：
1 var store = Ext.create(‘Ext.data.TreeStore‘, { 2 root: { 3 expanded: true, 4 children: [ 5 { text: "detention", leaf: true }, 6 { text: "homework", expanded: true, children: [ 7 { text: "book report", leaf: true }, 8 { text: "alegrbra", leaf: true} 9 ] },10 { text: "buy lottery tickets", leaf: true }11 ]12 }13 });14 15 Ext.create(‘Ext.tree.Panel‘, {16 title: ‘Simple Tree‘,17 width: 200,18 height: 150,19 store: store,20 rootVisible: false,21 renderTo: Ext.getBody()22 });
其实在上述代码中，主要就是创建了一个树的数据源，然后加载到面板中，在传递到页面中显示。
然而在本项目中，由于具体的需求，显示了一颗树上的两个叶子，并且为两个叶子的跳转增加了函数。具体代码如下：
1 Ext.onReady(function(){ 2 //顶部 3 var topPanel = Ext.create(‘Ext.panel.Panel‘,{ 4 region:‘north‘,///指定top方向 5 border:false, 6 height:80, 7 contentEl:‘top‘,//在网页中需要用id进行接收 8 margins:‘0 0 0 0‘ 9 }); 10 11 //中间 12 var centerPanel = Ext.create(‘Ext.tab.Panel‘,{ 13 region:‘center‘, 14 contentEl:‘contentIframe‘, 15 id:‘mainContent‘, 16 items:[{title:‘首页‘}] 17 }); 18 19 //创建模型 20 Ext.define(‘Menu‘, { 21 extend: ‘Ext.data.Model‘, 22 fields: [ 23 {name: ‘text‘, type: ‘string‘}, 24 {name: ‘url‘, type: ‘string‘} 25 ] 26 }); 27 28 //创建数据(树的数据) 29 var info1 = { 30 text:‘信息1‘, 31 leaf:true, 32 url:‘../src/test1.html‘ 33 }; 34 var info2 = { 35 text:‘信息2‘, 36 leaf:true, 37 url:‘../src/test2.html‘ 38 }; 39 40 //创建数据源 41 var menuStore = Ext.create(‘Ext.data.TreeStore‘,{ 42 model:‘Menu‘, 43 proxy:{ 44 type:‘memory‘, 45 data:[info1,info2] 46 }, 47 root:{ 48 text:‘首页‘, 49 leaf:false, 50 expanded:true 51 } 52 }); 53 54 //创建树菜单 55 var menuTree = Ext.create(‘Ext.tree.Panel‘,{ 56 border:false, 57 store:menuStore, 58 hrefTarget:‘mainContent‘, 59 useArrows:false, 60 listeners:{ 61 itemclick:function(view,rec,item,index,e){ 62 if(rec.get(‘leaf‘)) { 63 changePage(rec.get(‘url‘),rec.get(‘text‘)); 64 } 65 } 66 } 67 }); 68 69 //切换内容 70 function changePage(url,title) { 71 var index = centerPanel.items.length; 72 //tab不超过2个 73 if(index==2) { 74 //索引从0开始 75 centerPanel.remove(1); 76 } 77 //动态添加tab 78 var tabPage = centerPanel.add({ 79 title:title, 80 closable:true 81 }); 82 //设置显示当前的tab 83 centerPanel.setActiveTab(tabPage); 84 Ext.getDom(‘contentIframe‘).src=http://www.mamicode.com/url; 85 } 86 87 // 88 89 //左边 90 var westPanel = Ext.create(‘Ext.panel.Panel‘,{ 91 region:‘west‘, 92 layout:‘accordion‘, 93 width:200, 94 title:‘菜单选项‘, 95 collapsible:true, 96 margins:‘0 5px 0 0‘, 97 items:[menuTree] 98 }); 99 100 //通过viewport显示出来101 Ext.create(‘Ext.container.Viewport‘,{102 layout:‘border‘,103 items:[topPanel,centerPanel,westPanel]104 });105 106 107 });
接下来在页面中进行引用：
1 <div id="top">2 <img src="http://www.mamicode.com/img/top.png" style="width: 1763px"/>3 </div>4 <iframe id="contentIframe" name="contentIframe" style="height:100%;width:100%" frameborder="0"></iframe>
关于叶子节点的页面就可以自己编写，至此项目构建完成，其中还有一些较为详细的点没有提出，例如需要引入extjs等。大家可以再https://github.com/zhangxy1035/extjs上看源码。然后构建自己的项目。
使用Extjs组件实现Top-Left-Main布局并且增加事件响应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。