Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美实现
更新时间:2012年11月14日 09:03:52 作者:
中午的时候发了第一篇 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等都会被一次加载。
首先我们需要定义一个公共方法让application加载controller
//动态加载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结构如下(真的是很多,真的是很蛋疼):
当我们单击功能节点树的"组织架构"的时候,开始加载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⊙ )哇
上篇文章中,关于ExtJs这个玩意的评论就跟java和.Net那个好一样,既然上了贼船,就难下了,而且对于企业级的应用我个人觉得Extjs框架还是不错的,尤其是没有UI设计的团队(苦逼的程序员就兼UI吧),起码难得发现一个做的比较好的UI框架(国产的miniUI貌似看的过去,其他的就有点扯淡了[什么EasyUI、Dojo、JqueryUI等等]),2年前选择了Extjs2.0之后收费了,停了一段时间,后面做了比较久的Ext.Net(主要是开发效率高),现在还是转回了ExtJs4,又到了起点,悲吹....干吧!
扯远了,回归正题:中午的时候碰到一个问题,控件的事件被注销了,思索了下考虑是application重新创建覆盖主框架的问题,那么也就是说整个系统只能采用一个application,那么如何动态的加载controller呢?只要动态的加载了controller,其他的view、store等都会被一次加载。
首先我们需要定义一个公共方法让application加载controller
复制代码 代码如下:
//动态加载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结构如下(真的是很多,真的是很蛋疼):
当我们单击功能节点树的"组织架构"的时候,开始加载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⊙ )哇
相关文章
利用FastReport传递图片参数在报表上展示签名信息的实现方法
这篇文章主要介绍了利用FastReport传递图片参数在报表上展示签名信息,其中主要注意的是,我们传递的图片数据需要采用Base64String的格式才能正常传递和展示,本文通过图文实例代码相结合给大家介绍的非常详细,需要的朋友可以参考下2022-10-10ASP.NET Core MVC如何实现运行时动态定义Controller类型
这篇文章主要介绍了ASP.NET Core MVC如何实现运行时动态定义Controller类型,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-06-06.NET core项目AsyncLocal在链路追踪中的应用
这篇文章主要为大家介绍了.NET core项目zhong AsyncLocal在链路追踪中的应用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-05-05Queryable.Union 方法实现json格式的字符串合并的具体实例
这篇文章介绍了Queryable.Union 方法实现json格式的字符串合并的具体实例,有需要的朋友可以参考一下2013-10-10ASP.NET中实现jQuery Validation-Engine的Ajax验证实现代码
在jQuery的表变验证插件中Validation-Engine是一款高质量的产品,提示效果非常精美,而且里面包含了AJAX验证功能2012-05-05.Net Core3.0 WebApi 项目框架搭建之使用Serilog替换掉Log4j
Serilog 是一个用于.NET应用程序的日志记录开源库,配置简单,接口干净,并可运行在最新的.NET平台上,这篇文章主要介绍了.Net Core3.0 WebApi 项目框架搭建之使用Serilog替换掉Log4j,需要的朋友可以参考下2022-02-02
最新评论