Ext Mvc 概念解析及动态加载文件

引用：

http://www.ibm.com/developerworks/cn/web/1210_wangzh_extjsmvc/index.html

http://blog.csdn.net/jiushuai/article/details/8185884

摘要：

对于MVC这种技术（或架构），怎么说呢，现在大抵上无论前端框架或后台架构，都或多或少地提出了一些MVC的便携式开发模式，如 .Net 的则有 ASP.MVC，而像Ruby on Rails 就直接声称是基于MVC思想构建的，至于大部分的 PHP 框架（如cakePHP,speedPHP）则也跳出来说明我们是 基于MVC的~但不管事实如何，MVC 这种技术的确是给我们带来诸多方便。下面浅析 Ext MVC。

MVC：MVC 是一种成熟的软件设计模式。MVC 模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式通过对复杂度的简化，使程序结构更加直观。软件系统通过对自身基本部份分离的同时也赋予了各个基本部分应有的功能。专业人员可以通过自身的专长分组：

• 重用性

  Ext JS 4 中，数据模型、视图组件和存储组件能重复使用，使用时只需将它们的名称作为引用添加到特定的 controller 中。

• 职能分离

  模型、视图、控制器以及存储之间的职能分离，使得每个 JS 文件的职能单一化、最小化。开发人员只需要引用这些必需的职能单元即可构建新的功能。

• 职责清晰

  由于每一个 JS 单元文件的职责清晰，不同类型的“职责”被划分为不同的组件。在集成开发工具中，开发人员很容易利用这些组件构建自己的应用。

• 复杂性

  运用 MVC 模式时有一定的复杂性，因为开发者需要付出额外的努力去学习 Ext JS 4 的 MVC 框架，但在大型项目中这个付出是值得的。另外 Sencha 提供了相应的集成开发工具 Sencha Architect 协助基于 MVC 框架的开发，一定程度上减轻了因运用 MVC 模式带给开发者的压力。

内容：

1，基础之一：命名空间，Ext JS 类能按作用域分开存放了。.NET 或 Java 开发者熟悉命名空间的好处：命名空间让全类名映射到类文件路径变得很容易，将类按作用域分文件夹存放使得类更容易管理。以 MVC 为例，Ext JS 类将按作用域：模型（model/store）、视图（view）和控制器（Controller）分为三类，分别存放于对应文件夹中。然后按需加载相关 js （或其他资源）文件。

2，基础之二：好处，摆脱这些困境：难写、难读、难维护、难扩展，最主要的是能很简单地写出漂亮的代码。

3，基础之三：各作用域详解：

Model：一组字段的集合以及它们对应的数据（例如：“User”类 model 有“username”和“password”字段），通过 data 包 (store,proxy 等 )Model 能序列化自己，并能通过关联关系从一个 Model 导航到另一个 Model。个人理解是：model 只是对后台返回的数据作一个序列化，或者说格式化也行，Model 与 Store 结合使用。

View：任意组件，如 Grid, Tree 和 Panel 都是视图。 View 主要起到一个展示的作用，不包含功能代码

Controllers：在这里写所有的逻辑代码：如渲染视图、实例化模型、加载并初始化其它控制器等。主要就是功能代码

4，基础之四：文件目录：

5，基础之五：步骤之app.js：

每个ExtJS的应用都必须从创建一个Ext.app.Application实例开始，app/app.js创建一个Application实例，并完成初始化。name: 'USERS'表示命名空间为USERS，完全源代码如下：app.js

var appEM;

Ext.application({

    requires: 'Ext.container.Viewport',

    name: 'EM',

    appFolder: 'app',

    autoCreateViewport: true,

    controllers: ['Main','ctrl1','ctrl2'],

    launch: function() {

        appEM = this;

    }

});

将这个 app.js 引进你的html，Ext MVC 就可以开始工作了，其中，autoCreateViewport 表明你还要自主创建一个 viewport 界面来展示你的东西，这里不再多说，可自行下载源文件来加深理解。

6，基础之六：步骤之ctrl.js:

Ext.define('EM.controller.form.dateFieldFormCtrl', { 

    extend: 'Ext.app.Controller',

    models: ['grid.basicGridMol'],

    stores: ['grid.basicGridSto'],

    views: ['form.basicForm'],

    init: function() { // 首先被执行

        this.control({

            'basicForm': {//监听

                afterrender: this.initOperator

            }

        });

    }

    initOperator: function(grid, ept) {

        var me = this;

        me.aryObj.Grid = grid;

    }

});

这个 ctrl.js 就不用再引进了，因为 app.js 在引进时就会加载这个 ctrl.js，同时，ctrl.js会引进它所需要的 model、store、view，同时，你会在ctrl 里面写入各式各样的 事件处理，这个时候，一个Ext MVC 的大概的流程就走完了

7，小小之进阶：动态加载 controller：

如果你的项目有点大了，通常的情况是这样的：

Ext.application({

    controllers: ['Main','ctrl1','ctrl2','ctrl3','ctrln'.......],

});

当你的 app.js 加载进来时，茫茫多的 controller 也加载进来，紧接着，茫茫多的model、store、view、然后，store如果是autoLoad，那么，茫茫多的https请求。。。

缺点就不说了，下面说说动态加载的问题，方法很简单：

    addAppController:function(controller){

        if(!appEM.controllers.get(controller)){//appEM指的是 application，你可以找个位置赋值，先判断是否加载完了 controller，

           appEM.getController(controller);//再进行动态加载controller，注意，此方法会自动触发 Controller 的 init() 方法

        }

    },

8，未完待续....