使用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完成的，主要代码如下：

     //顶部
     var topPanel = Ext.create('Ext.panel.Panel',{
         region:'north',///指定top方向
         border:false,
         height:,
         contentEl:'top',//在网页中需要用id进行接收
         margins:'0 0 0 0'
     });

　　本身来讲大家所看到的left面板其实就是extjs中所提到的树，接下来，我们将具体谈谈如何生成这棵树。

　　官方代码如下：　

 var store = Ext.create('Ext.data.TreeStore', {
     root: {
         expanded: true,
         children: [
             { text: "detention", leaf: true },
             { text: "homework", expanded: true, children: [
                 { text: "book report", leaf: true },
                 { text: "alegrbra", leaf: true}
             ] },
             { text: "buy lottery tickets", leaf: true }
         ]
     }
 });

 Ext.create('Ext.tree.Panel', {
     title: 'Simple Tree',
     width: ,
     height: ,
     store: store,
     rootVisible: false,
     renderTo: Ext.getBody()
 });

　　其实在上述代码中，主要就是创建了一个树的数据源，然后加载到面板中，在传递到页面中显示。

　　然而在本项目中，由于具体的需求，显示了一颗树上的两个叶子，并且为两个叶子的跳转增加了函数。具体代码如下：

 Ext.onReady(function(){
     //顶部
     var topPanel = Ext.create('Ext.panel.Panel',{
         region:'north',///指定top方向
         border:false,
         height:80,
         contentEl:'top',//在网页中需要用id进行接收
         margins:'0 0 0 0'
     });

     //中间
     var centerPanel = Ext.create('Ext.tab.Panel',{
         region:'center',
         contentEl:'contentIframe',
         id:'mainContent',
         items:[{title:'首页'}]
     });

     //创建模型
     Ext.define('Menu', {
         extend: 'Ext.data.Model',
         fields: [
             {name: 'text',  type: 'string'},
             {name: 'url',  type: 'string'}
         ]
     });

     //创建数据(树的数据)
     var info1 = {
             text:'信息1',
             leaf:true,
             url:'../src/test1.html'
     };
     var info2 = {
             text:'信息2',
             leaf:true,
             url:'../src/test2.html'
     };

     //创建数据源
     var menuStore = Ext.create('Ext.data.TreeStore',{
         model:'Menu',
         proxy:{
             type:'memory',
             data:[info1,info2]
         },
         root:{
             text:'首页',
             leaf:false,
             expanded:true
         }
     });

     //创建树菜单
     var menuTree = Ext.create('Ext.tree.Panel',{
         border:false,
         store:menuStore,
         hrefTarget:'mainContent',
         useArrows:false,
         listeners:{
             itemclick:function(view,rec,item,index,e){
                 if(rec.get('leaf')) {
                     changePage(rec.get('url'),rec.get('text'));
                 }
             }
         }
     });

     //切换内容
     function changePage(url,title) {
         var index = centerPanel.items.length;
         //tab不超过2个
         if(index==2) {
             //索引从0开始
             centerPanel.remove(1);
         }
         //动态添加tab
         var tabPage = centerPanel.add({
             title:title,
             closable:true
         });
         //设置显示当前的tab
         centerPanel.setActiveTab(tabPage);
         Ext.getDom('contentIframe').src=url;
     }

     //

     //左边
     var westPanel = Ext.create('Ext.panel.Panel',{
         region:'west',
         layout:'accordion',
         width:200,
         title:'菜单选项',
         collapsible:true,
         margins:'0 5px 0 0',
         items:[menuTree]
     });

     //通过viewport显示出来
     Ext.create('Ext.container.Viewport',{
         layout:'border',
         items:[topPanel,centerPanel,westPanel]
     });

 });

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

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

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