Extjs4.1.x 框架搭建采用Application動態(tài)按需加載MVC各模塊完美實現(xiàn)

2024-09-06 20:44:34

字體：大中小

供稿：網(wǎng)友

中午的時候發(fā)了第一篇 Extjs4.1.x 框架搭建采用Application動態(tài)按需加載MVC各模塊，發(fā)現(xiàn)實現(xiàn)上還是有問題，有很多理解不到位的地方，晚上詳細解決下了，終于實現(xiàn)MVC各模塊按需加載了，哈皮。

上篇文章中，關(guān)于ExtJs這個玩意的評論就跟java和.Net那個好一樣，既然上了賊船，就難下了，而且對于企業(yè)級的應(yīng)用我個人覺得Extjs框架還是不錯的，尤其是沒有UI設(shè)計的團隊（苦逼的程序員就兼UI吧），起碼難得發(fā)現(xiàn)一個做的比較好的UI框架（國產(chǎn)的miniUI貌似看的過去，其他的就有點扯淡了[什么EasyUI、Dojo、JqueryUI等等]），2年前選擇了Extjs2.0之后收費了，停了一段時間，后面做了比較久的Ext.Net（主要是開發(fā)效率高），現(xiàn)在還是轉(zhuǎn)回了ExtJs4，又到了起點，悲吹....干吧！

扯遠了，回歸正題：中午的時候碰到一個問題，控件的事件被注銷了，思索了下考慮是application重新創(chuàng)建覆蓋主框架的問題，那么也就是說整個系統(tǒng)只能采用一個application，那么如何動態(tài)的加載controller呢？只要動態(tài)的加載了controller，其他的view、store等都會被一次加載。

首先我們需要定義一個公共方法讓application加載controller
代碼如下:
//動態(tài)加載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);
// 優(yōu)先加載模型
controller.loadModel();
controller.init(this);
controller.onLaunch(this);
//動態(tài)構(gòu)建視圖 & 綁定模型數(shù)據(jù)
controller.loadView();
}
}
}
});
/*****END************/

OK,看整個的"組織架構(gòu)的"js結(jié)構(gòu)如下(真的是很多,真的是很蛋疼):