学步园

公司项目使用ExtJs4 MVC搭建的页面 由于系统庞大导致首次加载页面时间过长，公司要求优化，经过一段时间的研究实现ExtJs4 MVC 

根据要求动态加载所需组件的js文件，也就是动态加载相应的Controller文件，其他文件会自动引用。

以下列出实现的Demo关键代码和效果。（不对MVC整体框架进行详细介绍）

建立测试Demo目录

程序入口：

Ext.Loader.setConfig({
    enabled: true
});

var application = new Ext.app.Application({
    name: 'GxhDemo',
    appFolder: 'GxhDemo',
    autoCreateViewport: true,
    controllers: [
        'GxhDemoController'
    ],
    launch: function () {
        Ext.tip.QuickTipManager.init();
    }
});

入口Controller文件：

Ext.define('GxhDemo.controller.GxhDemoController', {
    extend: 'Ext.app.Controller',
    views: [
        'GxhDemoLayout.GxhNorth',
        'GxhDemoLayout.GxhCenter',
        'GxhDemoLayout.GxhWest'
    ],
    stores: [
        'GxhDemoLayout.GxhWestStore'
    ],
    models: [
        'GxhDemoLayout.GxhWestModel'
    ],
    refs: [
        {
            ref: 'gxhcenter',
            selector: 'gxhcenter'
        }
    ],
    init: function (app) {
        this.control({
            'gxhwest': {
                'itemclick': this.onItemClick
            }
        });
    },
    onItemClick: function (tree, record, item, index, e, eOpts) {
        var self = this;
        var selected = record;
        if (selected.get('id') == 'nrgl') {
            Ext.require("GxhDemo.controller.BHCMSController", function () {
                var bhcmsController = application.getController('BHCMSController');
                bhcmsController.init(self);
            }, self);
        } else if (selected.get('id') == 'wdgzt') {
            Ext.require("GxhDemo.controller.BHINFOController", function () {
                var bhinfoController = application.getController('BHINFOController');
                bhinfoController.init(self);
            }, self);
        }
    }
});

子模块Controller文件：

Ext.define('GxhDemo.controller.BHCMSController', {
    extend: 'Ext.app.Controller',
    views: [
        'BHCMS.BHCMSPanel',
        'BHCMS.BHCMSGrid'
    ],
    stores: [
        'BHCMS.BHCMSGridStore'
    ],
    models: [
        'BHCMS.BHCMSGridModel'
    ],
    init: function (app) {
        var center = app.getController('GxhDemoController').getGxhcenter();
        var bhcmsPanel = center.child('bhcmspanel');
        if (!bhcmsPanel) {
            var bhcmsPanel = Ext.widget('bhcmspanel', { title: '内容管理' });
            center.add(bhcmsPanel);
            center.setActiveTab(bhcmsPanel);
        } else {
            center.setActiveTab(bhcmsPanel);
        }
        this.control({
            'bhcmsgrid': {
                'itemclick': this.gridItemClickFun
            }
        });
    },
    gridItemClickFun: function (view, record, item, index, e, eOpts) {
        alert(record.get('name'));
    }
});

初次运行程序效果：

加载的js文件只有与程序入口相关的MVC相关文件。

 

点击左侧内容管理加载相应模块效果：

只加与载点击模块有关的MVC相关文件。

 

项目庞大的系统，按需动态加载相关模块下的js文件，可以提升系统的运行效率。

经测试首次加载系统的速度确实比原来有很大提升。