`

Extjs创建多个controller实现多模块MVC动态加载

阅读更多

转: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 MVC示例是基于ExtJS 4.2.0框架的一个典型应用场景,它展示了如何在Web应用中利用MVC(Model-View-Controller)设计模式进行开发。MVC模式是一种软件设计模式,用于分离应用程序的数据、用户界面和逻辑控制,以...

    asp.net+MVC+Extjs 考试管理系统

    系统的核心功能是自动生成试卷,这通常涉及试题库管理、试题类型设定、难度等级划分以及随机选题策略等多个方面。 【知识点详解】: 1. asp.net:asp.net是微软公司推出的一种Web应用程序框架,用于构建动态网站、...

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    在这个例子中,我们可能会看到多个Controller、Model和View类,每个都对应着仪表盘的某个部分。 2. **index.html**:这是主HTML文件,通常包含了引入ExtJS库和应用启动脚本的代码。在这个示例中,index.html会加载...

    ExtJS_MVC框架的搭建实例

    - **SpringMVC**: 作为Spring框架的一个模块,它是Spring框架的一部分,主要用于构建Web应用,实现MVC模式。 - **MyBatis**: 是一款优秀的持久层框架,它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎...

    Spring3MVC + MyBatis + ExtJs3整合开发系列

    Spring3MVC、MyBatis和ExtJs3的整合开发旨在创建一个高效的、灵活的Web应用程序。整合的关键在于如何协调这些框架的工作,使得Spring3MVC处理HTTP请求和控制流程,MyBatis负责数据访问和SQL执行,而ExtJs3则作为前端...

    extjs4 mvc skel-master

    ExtJS 4 MVC Skel Master 是一个基于ExtJS 4框架的MVC(Model-View-Controller)架构的项目模板,适用于快速构建复杂的Web应用程序。这个压缩包包含了一个基础的MVC项目结构,帮助开发者更好地理解和应用ExtJS的MVC...

    Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美实现

    在本文中,我们将深入探讨如何使用ExtJS 4.1.x框架,特别是通过Application动态按需加载MVC模块,以实现更高效、优化的项目构建。首先,我们需要理解ExtJS MVC架构的基础,它包括模型(Model)、视图(View)、控制...

    extjs-mvc-architecture.pdf

    - **标准化**:每个应用都有相同的运作方式,这意味着开发者只需学习一次即可掌握多个应用的开发。 - **易于共享代码**:由于所有应用的工作模式相同,代码共享变得更加容易,提高了开发效率。 - **混淆代码发布**:...

    EXTJS4+MVC+JSP-buy360用户管理系统源码

    MVC模式则是一种软件设计模式,它在EXTJS中被广泛采用,以实现良好的代码组织和模块化。JSP(JavaServer Pages)是Java Web开发中的视图层技术,用于生成动态网页内容。 EXTJS4在buy360用户管理系统中扮演了前端...

    [ExtJS] MVC应用架构示例

    本示例将深入探讨如何在ExtJS中实现MVC架构,以及它如何帮助我们构建可扩展和模块化的应用。 1. **MVC模式详解** - **模型(Model)**:模型层负责管理应用程序的数据和业务逻辑。在ExtJS中,模型类通常继承自`Ext....

    ExtJs-3.2.0.rar

    这个"ExtJs-3.2.0.rar"压缩包包含了ExtJS 3.2.0版本的所有资源,允许开发者利用其强大的组件库和丰富的功能来创建交互式、数据驱动的网页应用。 1. **ExtJS框架介绍** ExtJS提供了一套完整的UI组件,包括表格、树...

    ExtJS6MinMvcExample

    在"ExtJS6MinMvcExample"中,可能包含了一个或多个模型类,用于定义应用所需的数据结构。 2. **视图(View)**: 视图是用户界面的呈现部分,它通常由各种组件(如面板、表格、按钮等)组成。在ExtJS中,`Ext....

    Extjs文件管理系统

    ExtJS 的 Grid 组件可以用来展示文件列表,用户可以选择一个或多个文件进行操作。按钮点击事件会触发相应的压缩或解压缩操作,这些操作通常由 ExtJS 的 Action 或 Button 组件实现。 搜索功能是另一个关键模块。...

    ExtJs运行环境

    使用这个环境,开发者可以遵循MVC(Model-View-Controller)架构模式来组织代码,提高代码的可维护性和可扩展性。在视图层,ExtJs组件可以轻松地与控制器和模型进行交互,实现实时数据更新和用户事件处理。 总结...

    etmvc+extjs+qwikioffice框架的开源系统jxc

    ETMVC(Enterprise Template Model View Controller)是一个专为Web应用程序设计的轻量级、高性能的框架,它基于Model-View-Controller(MVC)设计模式,旨在提高开发效率,降低项目维护成本。ETMVC强调代码的可读性...

    extjs官方中文教程

    EXTJS的源码结构清晰,包含多个模块,如Core、Data、UI等。理解源码有助于开发者深入定制EXTJS组件和优化性能。EXTJS使用了模块化开发,便于按需加载,减少了页面加载时间。 适配器Adapters: 适配器在EXTJS中扮演...

    extjs2.2开发实战项目 已经发布运行

    项目中,EXTJS通过Store与远程服务器进行数据交互,实现了动态加载、排序、过滤等功能,大大提高了用户体验。 4. **布局管理**:EXTJS2.2的布局系统包括了各种类型的布局,如Fit布局、Border布局、Table布局等。...

    extjs2.0.2包

    ExtJS 2.0.2 是一个经典的JavaScript库,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库、强大的数据绑定机制以及优雅的用户界面。这个包包含了完整的框架,包括所有必要的文件,使得开发者能够充分利用其...

    EXTJS4.0详细教程

    MVC(Model-View-Controller)模式是EXTJS4中的核心架构,它将应用程序逻辑分离为三个独立的部分,增强了代码的模块化和可复用性。学习如何创建app.js文件并理解文件结构,是掌握EXTJS4.0 MVC模式的基础。 EXTJS4.0...

    extjs+s2sh

    通过使用MVC(Model-View-Controller)架构,ExtJS帮助开发者组织代码,提高可维护性和复用性。其响应式设计支持多设备兼容,使应用能够在桌面和移动平台上运行。 **2. Struts2** Struts2是基于MVC设计模式的Java ...

Global site tag (gtag.js) - Google Analytics