使用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      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=url;
 85     }
 86     
 87     //
 88     
 89     //左边
 90     var westPanel = Ext.create('Ext.panel.Panel',{
 91         region:'west',
 92         layout:'accordion',
 93         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 });

View Code

　　接下来在页面中进行引用：

1 <div id="top">
2     <img src="../img/top.png" style=" 1763px"/>
3 </div>
4 <iframe id="contentIframe" name="contentIframe" style="height:100%;100%" frameborder="0"></iframe>

　　关于叶子节点的页面就可以自己编写，至此项目构建完成，其中还有一些较为详细的点没有提出，例如需要引入extjs等。大家可以再https://github.com/zhangxy1035/extjs上看源码。然后构建自己的项目。