转:http://blog.csdn.net/jiushuai/article/details/8185884
之前想通过创建多个application来实现动态加载模块。保留mvc模式。但是那样不是很好。改成动态加载controller来显示加载多模块,一个模块对应一个controller,
在controller中动态加载其他controller。
可以先参考之前的文章:
Extjs创建多个application实现多模块MVC动态加载。。
传送门:http://blog.csdn.net/jiushuai/article/details/8000365
思路如下:
moduleController中动态创建userController和roleController,userController和 rolecontroller保留mvc模式管理各自对应模块的组件(当然userController和roleController也可以动态创建其 子模块。)
我的moduleController其实就是最外层的border模块,moduleController里面的菜单是左边的菜单“用户管理”, “子系统管理”等,当点击用户管理按钮或者子系统管理按钮的时候,动态加载改模块对应的controller。现在的代码和图片没有对应上,因为现在代码 比较新,用的是旧图,原理是一样的。如下图
修改步骤:
1:首先将
Ext.application({
name: 'IV',
appFolder: 'js/app',
autoCreateViewport:true,
controllers: [
'config.ModuleController','config.user.UserController',''config.system.UserController''
],
launch: function() {
Ext.tip.QuickTipManager.init();
}
});
改为:
var application = new Ext.app.Application({
name: 'IV',
appFolder: 'js/apps/mainApp',
autoCreateViewport:true,
// requires:['Module.SubSystemModule','Module.UserModule'],
controllers: [
// 'config.ModuleController','config.user.UserController'
'ModuleController'
],
launch: function() {
//Ext.Msg.alert('1','323333333');
Ext.tip.QuickTipManager.init();
}
});
说明:将application定义到外面。方便controller引用。(也可以不用定义到外面,因为controller里面的init方法能拿到applicaiton的引用)
然后:在moduleController里面的按钮菜单点击处理函数里面代码如下:
onSelectionChange: function(thisview, record, eOpts){
var self = this;
var selected = record;
if(selected.get('module') =='userModule'){
Ext.require("IV.controller.UserController",function(){
var userController = application.getController('UserController');
userController.init(application);
},self);
}else if(selected.get('module') =='roleModule'){
Ext.require("IV.controller.RoleController",function(){
var roleController = application.getController('RoleController');
roleController.init(application);
},self);
}
}
注意
Ext.require("IV.controller.UserController",function(){
var userController = application.getController('UserController');
userController.init(application);
},self);
先加载userController。然后再加载完成后,通过application的getController方法实例化 UserController,并注册UserController到application中。然后手动调用该controller的init方法。因 为你是动态加载该controller的,如果这里不执行init方法将application传过去的话,controller里面的init方法是不 会自动执行的。application的源码里面也是这么干的。。so我也这么干。
2:然后:
在我的userController里面的init方法如下:
init: function(app) {
this.control({
'userGrid': {
'itemclick':this.gridItemClickFun
}
});
var center = app.getController('ModuleController').getCenter();
var userPanel = center.child('userPanel');
if(!userPanel){
var userPanel = Ext.widget('userPanel',{title:'系统设置>用户管理'});
center.add(userPanel);
center.setActiveTab(userPanel);
}else{
center.setActiveTab(userPanel);
}
},
我需要通过application来获得moduleController的引用,并根据moduleController来获得里面的 center组件(一个tabPanel)。然后将UserController对应模块里面的UserPanel添加到center组件的tab中。 (这个userPanel就类似于moduleController中的viewPort,userPanel以及其里面的子元素,都可以遵循mvc模式 在userController里面进行管理了。)。之后userController里面的代码逻辑就照正常MVC逻辑走。
示例代码下载地址:
http://download.csdn.net/detail/wzq2009/6773723
相关推荐
ExtJS MVC示例是基于ExtJS 4.2.0框架的一个典型应用场景,它展示了如何在Web应用中利用MVC(Model-View-Controller)设计模式进行开发。MVC模式是一种软件设计模式,用于分离应用程序的数据、用户界面和逻辑控制,以...
系统的核心功能是自动生成试卷,这通常涉及试题库管理、试题类型设定、难度等级划分以及随机选题策略等多个方面。 【知识点详解】: 1. asp.net:asp.net是微软公司推出的一种Web应用程序框架,用于构建动态网站、...
在这个例子中,我们可能会看到多个Controller、Model和View类,每个都对应着仪表盘的某个部分。 2. **index.html**:这是主HTML文件,通常包含了引入ExtJS库和应用启动脚本的代码。在这个示例中,index.html会加载...
- **SpringMVC**: 作为Spring框架的一个模块,它是Spring框架的一部分,主要用于构建Web应用,实现MVC模式。 - **MyBatis**: 是一款优秀的持久层框架,它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎...
Spring3MVC、MyBatis和ExtJs3的整合开发旨在创建一个高效的、灵活的Web应用程序。整合的关键在于如何协调这些框架的工作,使得Spring3MVC处理HTTP请求和控制流程,MyBatis负责数据访问和SQL执行,而ExtJs3则作为前端...
ExtJS 4 MVC Skel Master 是一个基于ExtJS 4框架的MVC(Model-View-Controller)架构的项目模板,适用于快速构建复杂的Web应用程序。这个压缩包包含了一个基础的MVC项目结构,帮助开发者更好地理解和应用ExtJS的MVC...
在本文中,我们将深入探讨如何使用ExtJS 4.1.x框架,特别是通过Application动态按需加载MVC模块,以实现更高效、优化的项目构建。首先,我们需要理解ExtJS MVC架构的基础,它包括模型(Model)、视图(View)、控制...
- **标准化**:每个应用都有相同的运作方式,这意味着开发者只需学习一次即可掌握多个应用的开发。 - **易于共享代码**:由于所有应用的工作模式相同,代码共享变得更加容易,提高了开发效率。 - **混淆代码发布**:...
MVC模式则是一种软件设计模式,它在EXTJS中被广泛采用,以实现良好的代码组织和模块化。JSP(JavaServer Pages)是Java Web开发中的视图层技术,用于生成动态网页内容。 EXTJS4在buy360用户管理系统中扮演了前端...
本示例将深入探讨如何在ExtJS中实现MVC架构,以及它如何帮助我们构建可扩展和模块化的应用。 1. **MVC模式详解** - **模型(Model)**:模型层负责管理应用程序的数据和业务逻辑。在ExtJS中,模型类通常继承自`Ext....
这个"ExtJs-3.2.0.rar"压缩包包含了ExtJS 3.2.0版本的所有资源,允许开发者利用其强大的组件库和丰富的功能来创建交互式、数据驱动的网页应用。 1. **ExtJS框架介绍** ExtJS提供了一套完整的UI组件,包括表格、树...
在"ExtJS6MinMvcExample"中,可能包含了一个或多个模型类,用于定义应用所需的数据结构。 2. **视图(View)**: 视图是用户界面的呈现部分,它通常由各种组件(如面板、表格、按钮等)组成。在ExtJS中,`Ext....
ExtJS 的 Grid 组件可以用来展示文件列表,用户可以选择一个或多个文件进行操作。按钮点击事件会触发相应的压缩或解压缩操作,这些操作通常由 ExtJS 的 Action 或 Button 组件实现。 搜索功能是另一个关键模块。...
使用这个环境,开发者可以遵循MVC(Model-View-Controller)架构模式来组织代码,提高代码的可维护性和可扩展性。在视图层,ExtJs组件可以轻松地与控制器和模型进行交互,实现实时数据更新和用户事件处理。 总结...
ETMVC(Enterprise Template Model View Controller)是一个专为Web应用程序设计的轻量级、高性能的框架,它基于Model-View-Controller(MVC)设计模式,旨在提高开发效率,降低项目维护成本。ETMVC强调代码的可读性...
EXTJS的源码结构清晰,包含多个模块,如Core、Data、UI等。理解源码有助于开发者深入定制EXTJS组件和优化性能。EXTJS使用了模块化开发,便于按需加载,减少了页面加载时间。 适配器Adapters: 适配器在EXTJS中扮演...
项目中,EXTJS通过Store与远程服务器进行数据交互,实现了动态加载、排序、过滤等功能,大大提高了用户体验。 4. **布局管理**:EXTJS2.2的布局系统包括了各种类型的布局,如Fit布局、Border布局、Table布局等。...
ExtJS 2.0.2 是一个经典的JavaScript库,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库、强大的数据绑定机制以及优雅的用户界面。这个包包含了完整的框架,包括所有必要的文件,使得开发者能够充分利用其...
MVC(Model-View-Controller)模式是EXTJS4中的核心架构,它将应用程序逻辑分离为三个独立的部分,增强了代码的模块化和可复用性。学习如何创建app.js文件并理解文件结构,是掌握EXTJS4.0 MVC模式的基础。 EXTJS4.0...
通过使用MVC(Model-View-Controller)架构,ExtJS帮助开发者组织代码,提高可维护性和复用性。其响应式设计支持多设备兼容,使应用能够在桌面和移动平台上运行。 **2. Struts2** Struts2是基于MVC设计模式的Java ...