中午的時候發(fā)了第一篇 Extjs4.1.x 框架搭建 采用Application動態(tài)按需加載MVC各模塊 ,發(fā)現實現上還是有問題,有很多理解不到位的地方,晚上詳細解決下了,終于實現MVC各模塊按需加載了,哈皮。
上篇文章中,關于ExtJs這個玩意的評論就跟java和.Net那個好一樣,既然上了賊船,就難下了,而且對于企業(yè)級的應用我個人覺得Extjs框架還是不錯的,尤其是沒有UI設計的團隊(苦逼的程序員就兼UI吧),起碼難得發(fā)現一個做的比較好的UI框架(國產的miniUI貌似看的過去,其他的就有點扯淡了[什么EasyUI、Dojo、JqueryUI等等]),2年前選擇了Extjs2.0之后收費了,停了一段時間,后面做了比較久的Ext.Net(主要是開發(fā)效率高),現在還是轉回了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)構建視圖 綁定模型數據
controller.loadView();
}
}
}
});
/*****END************/
OK,看整個的"組織架構的"js結構如下(真的是很多,真的是很蛋疼):
當我們單擊功能節(jié)點樹的"組織架構"的時候,開始加載Controller的Org.js,是的只需要加載這一個就可以了,其他的他會自動加載,也是MVC的優(yōu)點:
復制代碼 代碼如下:
@{
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>
這樣整個組織架構的頁面搭建就實現了,而且是按需加載本模塊的,各個事件不會沖突。
具體的代碼太多了見附件。
這還沒開始寫業(yè)務邏輯呢,就這么蛋疼了寫了這一堆的js文件,看來整個架構完成,哥哥我非死即傷( ⊙o⊙ )哇
您可能感興趣的文章:- Node.js模塊加載詳解
- AngularJs動態(tài)加載模塊和依賴注入詳解
- node.js使用require()函數加載模塊
- 深入探尋seajs的模塊化與加載方式
- 利用Dojo和JSON建立無限級AJAX動態(tài)加載的功能模塊樹
- seaJs的模塊定義和模塊加載淺析
- Windows下使用apache模塊實現合并多個js、css提高網頁加載速度
- in.js 一個輕量級的JavaScript顆?;K加載和依賴關系管理解決方案
- 根據配置文件加載js依賴模塊
- js模塊加載方式淺析