• Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美解决(二)


    中午的的时候发了第一篇 Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块 ,发现实现上还是有问题,有很多理解不到位的地方,晚上详细解决下了,终于实现MVC各模块按需加载了,哈皮。

    上篇文章中,关于ExtJs这个玩意的评论就跟java和.Net那个好一样,既然上了贼船,就难下了,而且对于企业级的应用我个人觉得Extjs框架还是不错的,尤其是没有UI设计的团队(苦逼的程序员就兼UI吧),起码难得发现一个做的比较好的UI框架(国产的miniUI貌似看的过去,其他的就有点扯淡了[什么EasyUI、Dojo、JqueryUI等等]),2年前选择了Extjs2.0之后收费了,停了一段时间,后面做了比较久的Ext.Net(主要是开发效率高),现在还是转回了ExtJs4,又到了起点,悲吹....干吧!

    扯远了,回归正题:中午的时候碰到一个问题,控件的事件被注销了,思索了下考虑是application重新创建覆盖主框架的问题,那么也就是说整个系统只能采用一个application,那么如何动态的加载controller呢?只要动态的加载了controller,其他的view、store等都会被一次加载。 

    首先我们需要定义一个公共方法让application加载controller,借鉴:http://w26.iteye.com/blog/1531181 

    //动态加载js模块,****重要
    var application;
    Ext.Loader.setConfig({ enabled: true });
    Ext.require([
        'Ext.app.Application',
        'Ext.app.Controller'
    ]);
    Ext.app.Controller.implement({
        //MVC 加载模型
        loadModel: function () { },
        //MVC 加载视图
        loadView: function () { },
        getApplication: function () {
            return this.application;
        }
    });
    Ext.app.Application.implement({
        //MVC 加载控制器  param {String/Array} controllers
        loadModule: function (controllers) {
            var me = this;
            var controllers = Ext.Array.from(controllers), ln = controllers.length, i, controller;
            for (i = 0; i < ln; i++) {
                var name = controllers[i];
                if (!this.controllers.containsKey(name)) {
                    controller = Ext.create(
                            this.getModuleClassName(name, 'controller'), {
                                application: this,
                                id: name
                            });
                    this.controllers.add(controller);
                    // 优先加载模型
                    controller.loadModel();
                    controller.init(this);
                    controller.onLaunch(this);
                    //动态构建视图 & 绑定模型数据
                    controller.loadView();
                }
            }
        }
    });
    /*****END************/

    OK,看整个的"组织架构的"js结构如下(真的是很多,真的是很蛋疼):

    当我们单击功能节点树的"组织架构"的时候,开始加载Controller的Org.js,是的只需要加载这一个就可以了,其他的他会自动加载,也是MVC的优点:

    @{
        ViewBag.Title = "组织架构管理";
    }
    
    <script>
        /*    
        写法一:
        application.loadModule("Users");
        //var module = application.getController("Users");   
        //var viewName = module.views[1];
        //alert(viewName);
        //var view = module.getView("user.List");或者是viewName
        //var panel = view.create();
        //Global.ExtTabDoLayout(panel);
    
        写法二:
        var main = new Ext.Panel({
            border: false,
            layout: 'fit',
            items: [{
                xtype: 'userlist'
            }]
        });
        Global.ExtTabDoLayout(main);
    
        */
    
        application.loadModule("Org");
        var main = new Ext.Panel({
            border: false,
            layout: 'border',
            items: [{ xtype: 'OrgTree' }, { xtype: 'OrgUserGrid' }]
        });
       //添加到tab里
        Global.ExtTabDoLayout(main);
    </script>

    这样整个组织架构的页面搭建就实现了,而且是按需加载本模块的,各个事件不会冲突。

    具体的代码太多了见附件。

    这还没开始写业务逻辑呢,就这么蛋疼了写了这一堆的js文件,看来整个架构完成,哥哥我非死即伤( ⊙o⊙ )哇...............

    附件:https://files.cnblogs.com/qidian10/App.rar 

  • 相关阅读:
    Java日期时间差以及获取几天后或几天前
    java数组扩增的三种方式
    折半查找、冒泡排序和选择排序
    JavaSE-Map的三种循环
    Chrome浏览器showModalDialog兼容性及解决方案
    Integeter127与128
    statis代码块以及非static代码块之执行
    return、break、continue区别以及作用范围
    nodeJs + vue.js 小案例
    cordova CLI 命令
  • 原文地址:https://www.cnblogs.com/qidian10/p/2769149.html
Copyright © 2020-2023  润新知