使用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:80,
        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',
     200,
    height: 150,
    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',
        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=" 1763px"/>
</div>
<iframe id="contentIframe" name="contentIframe" style="height:100%;100%" frameborder="0"></iframe>

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