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

上篇文章中，關(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，又到了起點，悲吹....干吧！

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

//動態(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)如下(真的是很多,真的是很蛋疼): 
 
當(dāng)我們單擊功能節(jié)點樹的"組織架構(gòu)"的時候,開始加載Controller的Org.js，是的只需要加載這一個就可以了，其他的他會自動加載，也是MVC的優(yōu)點： 
 代碼如下:

@{ 
ViewBag.Title = "組織架構(gòu)管理"; 
} 
<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> 
 
這樣整個組織架構(gòu)的頁面搭建就實現(xiàn)了，而且是按需加載本模塊的，各個事件不會沖突。 
具體的代碼太多了見附件。 
這還沒開始寫業(yè)務(wù)邏輯呢，就這么蛋疼了寫了這一堆的js文件，看來整個架構(gòu)完成，哥哥我非死即傷( ⊙o⊙ )哇
 
 




聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com