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等都见面被同样浅加载。 

图片 1

率先我们用定义一个公艺术让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结构如下(真的是多,真的是特别蛋疼):

图片 2

当我们单击功能节点树的”组织架构”的时光,开始加载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⊙ )哇……………

 

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