Extjs4.1.x 框架搭建 采用Application動態按需加載MVC各模塊

我們知道Extjs4之后提出了MVC模塊開發，將以前肥厚的js文件拆分成小的js模塊[model\view\controller\store\form\data等]，通過controller拼接黏合，提高了js代碼的重用性，可閱讀性，更加適合團隊的開發。

js采用mvc后必定會帶來一個問題，如何高效的加載各個js小文件？

官方的例子是統一采用了一個Ext.Application入口：

Ext.application({
    name: 'WMS',
    appFolder: 'ExtJs/App',
    autoCreateViewport:true,
    controllers: [       'controller1','controller2','controller3'
    ],
    launch: function() {
           //
    }
});

由於一個應用程序只有一個入口也就是一個application，這樣會帶來一個問題，我一個項目有眾多的controller文件，需要在系統啟動的時候加載所有的js文件，這明顯不是我們想要的，我們想按需加載，在頁面呈現的時候按需加載js各個模塊文件。

看下面的框架例子，說的直白一點也就是我單擊功能菜單樹的“組織架構”，打開新的tab頁面的時候，再加載所需要的js文件。

由於tab頁面加載不是采用iframe的方式，這樣就會帶來更多的問題，畢竟他是和整個框架式一體的，需要考慮的問題不少。好處也很明顯，不用每次都加載必備的Extjs庫文件等。

//tab頁面加載方法
NodeClick: function (view, record) {
        if (record.data.leaf == true) {
            var panel = Ext.getCmp(record.id);
            if (!panel) {
                panel = {
                    id: record.id,
                    closable: true,
                    title: record.data.text,
                    iconCls: record.data.iconCls,
                    autoScroll: true,
                    border: false,
                    layout: 'fit',
                    autoLoad: {//采用autoload方式
                        url: record.data.url,
                        scope: this,
                        scripts: true,
                        text: '頁面加載中，請稍候....'
                    }
                };
                this.openTab(panel, record.id);
            } else {
                var main = Ext.getCmp("ViewPortCoreTab");
                main.setActiveTab(panel);
            }
        }
    },
    openTab: function (panel, id) {
        var o = (typeof panel == "string" ? panel : id || panel.id);
        var main = Ext.getCmp("ViewPortCoreTab");
        var tab = main.getComponent(o);
        if (tab) {
            main.setActiveTab(tab);
        } else if (typeof panel != "string") {
            panel.id = o;
            var p = main.add(panel);
            main.setActiveTab(p);
        }
    },

 

言歸正傳，還是那個問題，動態加載tab里的js模塊文件，看了下面這個老兄的文章，解決了大問題。 

http://www.nnwnn.com/a/bianchengjiaocheng/2012/0920/17461.html 

首先“組織架構”頁面的內容，我暫時采用官方的user demo代替，目錄架構如下：

 

在組織架構頁面的寫法如下（沒有整理，單獨歸檔js）

@{
    ViewBag.Title = "組織架構管理";
}

<script>
    Ext.define('Module.UserModule', {
        extend: 'Ext.app.Application',
        id:"Org",
        name: 'AM',
        appFolder: '/ExtJs/App',
        controllers: ["Users"],
        launch: function () {
        }
    });
    Ext.require("Module.UserModule", function () {
        var app = Ext.create('Module.UserModule');          //需求創建user辦理模塊的app
        Ext.onReady(function () {                                 //必需要等user辦理模塊的app創建完成后才執行
            var main = new Ext.Panel({
                border: false,
                layout: 'fit',
                items: [{
                    xtype: 'userlist'
                }]
            });
            //autoload方式，需要添加到tab，否則默認會是整個viewport，那就壞事嘍
            Global.ExtTabDoLayout(main);
        });
    });
</script>
    

好了，到目前為止，解決了按需加載js模塊的方法。

但是新的問題又來了[ExtJs這玩意真的是很痛苦，幾度放棄的邊緣]，引入了新的application后，頁面的原始事件被刷新掉了，不管用了，估計是

init: function () {
        this.control({//這里導致我整個框架的單擊樹節點的事件沒有了（估計是this的問題）
            'panel > userlist dataview': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },

 

繼續研究中....