ExtJs4实战流量统计系统----主框架搭建(三)

用ExtJs做前端框架,一般而言,主框架基本都会使用Border布局。

大概布局就像这个样子。

顶部左侧一般显示系统名称,右侧用户姓名。

左侧是一个手风琴(Accordion),或者其他的,比如Tree,用以实现导航或功能菜单。

中间就是主内容了,Tab选项卡的形式,以轻松支持多功能,同时可轻松切换,若是整个界面只支持最多一个页面的话,对于一个后台系统来说,确实不太方便。

当然,也可以多加几个模块,如顶部加一个用户信息及常用操作的工具条。

=========================分隔线====================================

如果只是简单的实现这样的布局,那么代码可以很简单。

var vp = Ext.create(‘Ext.Viewport‘, {
    layout: ‘border‘,
    items: [
        {
            xtype: ‘panel‘,
            region: ‘north‘,
            height: 60
        },
        {
            xtype: ‘panel‘,
            region: ‘west‘,
            width: 200
        },
        {
            xtype:‘panel‘,
            region:‘center‘
        }
    ]
});

定义布局为border,再定义三个内容块,分别为顶部,左侧和中间。

在实际项目中,直接这么简单的定义各块内容行吗?行,没问题,肯定能跑起来。

但对于后期代码阅读、维护、扩展等,那问题就来了。

为什么?因为各模块的内容远不只这么简单,比如左侧模块,简单一些,可能就是一个Tree空间,甚至更简单一些,只是几个固定的项,那么,负责一些呢。

以此系统来说,左侧包含三块内容:栏目列表、功能菜单、系统设置,这三块内容内部各包含一个Tree。

如果代码全部写在内容的Items里的话,层层嵌套,最终会导致单个文件过于庞大,难于阅读及维护。

=========================分隔线====================================

所以,还是建议以ExtJs官方推荐的方式编写脚本,就是以定义(Ext.Define)的方式实现各模块,再通过动态加载按需加载所需要的文件。

且按功能分类的将脚本写在不同的文件中,可以看下此系统的所有js文件:

 

 

Common:存放在些比较通用的东西,比如数据的Model,一些工具方法等;

Function:对应左侧模块的功能菜单,所有功能菜单里的功能都放在这;

Main:主框架文件夹,图片上有几个是没用的,暂时还没删。Center是中间主内容,LeftPanel是左侧模块,LeftTree是栏目树,SysSetTree是功能菜单树及洗头系统设置树。

Show:前端流量数据展示的一些功能;

Sys:系统设置相关功能文件。

=========================分隔线====================================

好了,说说主框架的搭建吧。

Ext.define("Yiqi.Main.Main", {
    extend: ‘Ext.container.Viewport‘,
    requires: [‘Yiqi.Main.Center‘, ‘Yiqi.Main.LeftPanel‘, ‘Yiqi.Common.Tools‘],
    initComponent: function () {
        this.buildTop();
        this.buildLeft();
        this.buildCenter();
        Ext.apply(this, {
            layout: ‘border‘,
            items: [
                this.topPart,
                this.leftPart,
                this.centerPart
            ]
        });
        this.callParent(arguments);
    },
    buildTop: function () {
        // 头部
        this.topPart = Ext.create(‘Ext.panel.Panel‘, {
            region: ‘north‘,
            margin: ‘5 5 0 5‘,
            header: false,
            split: true,
            collapsible: true,
            collapseMode: ‘mini‘,
            hideCollapseTool: true,
            contentEl: ‘top_box‘,
            height: 45
        });
    },
    buildLeft: function () {
        //左侧菜单
        this.leftPart = Ext.create(‘Yiqi.Main.LeftPanel‘, {
            region: ‘west‘,
            //flex:1,
            title: ‘功能菜单‘
        });
    },
    buildCenter: function () {
        //主体内容
        this.centerPart = Ext.create(‘Yiqi.Main.Center‘, {
            region: ‘center‘
            //flex:4
        });
    }
});

Ext.define的方式,定义整个主框架。内部各模块组件化,这样代码看上去,简洁多了。

=========================分隔线====================================

因为我需要自定义功能菜单是以Tab选项卡的形式打开还是弹出window的形式打开,所以,整个主框架,也就这一块花了点心思。

先看下功能菜单是怎么样的。

功能地址,就是功能所在的文件路径&文件名,也是模块的类名。

了解ExtJs动态加载的应该知道这个。

比如:用户管理,它的功能地址是Yiqi.Sys.Security.UserList,Yiqi是定义的动态加载根路径,

所以,这块功能的JS文件路径实际是:\Sys\Security\UserList.js。

功能类的定义:

Ext.define(‘Yiqi.Sys.Security.UserList‘,{
    extend:‘xxxxxx‘,
    //.............TODO
});

 

这也是使用ExtJs的一大好处,功能菜单,可以随意的定义功能地址、打开方式等等,而不需要改任何代码,当然,你得先把功能做好。

而打开方式的实现过程,也比较简单,定义树中node的单击事件,判断单击的node,有无定义功能地址,如果有,再判断打开方式,如果是弹出窗,则以window的形式打开;如果是选项卡,则以选项卡的方式打开。

onItemClick: function (view, rec, item, idx, e) {
        var path = rec.get("LoadPath"); //--功能地址
        var openType = rec.get("OpenType"); //--打开方式
        var me = this;
        if (!Ext.Object.isEmpty(path) && !Ext.Object.isEmpty(openType)) {if (openType == "window") {
                    var win_id = ‘syswin_‘ + rec.get("id");
                    var win = Ext.WindowManager.get(win_id);
                    if (win) {
                        Ext.WindowManager.bringToFront(win);
                    }
                    else {
                        win = Ext.create(path, {
                            title: rec.get("text"),
                            iconCls: rec.get("iconCls"),
                            id: win_id
                        });
                        win.show();
                    }
                }
                else if (openType == "tab") {
                    //--选项卡方式打开,先判断当前功能是否已经打开,如果已打开,则无需新建,直接将该功能设为活动选项卡就行了。
                    //--me.ownerCt.ownerCt.centerPart是主框架的中间内容模块。
                    var tab = me.ownerCt.ownerCt.centerPart.getComponent(‘tab_sys_‘ + rec.get(‘id‘));
                    if (!tab) {
                        var newitem = Ext.create(path, {});
                        tab = Ext.create(‘Ext.panel.Panel‘, {
                            title: rec.get(‘text‘),
                            itemId: ‘tab_sys_‘ + rec.get(‘id‘),
                            layout: ‘fit‘,
                            closable: true,
                            iconCls: rec.get(‘iconCls‘) || ‘icon_preview‘,
                            items: newitem
                        });
                        me.ownerCt.ownerCt.centerPart.add(tab);
                    }
                    //--设为活动选项卡
                    me.ownerCt.ownerCt.centerPart.setActiveTab(tab);
                }
        }
    }

至此,主框架就差不多了~~~

ExtJs4实战流量统计系统----主框架搭建(三),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。