ASP.NET MVC3与EXTJS4 MVC 实战教程

"EXTJS4.0_MVC实例教程" EXTJS4.0 是一个强大的JavaScript 框架，尤其在创建富客户端应用方面表现出色。它引入了MVC（Model-View-Controller）架构模式，这与传统的MVC有所不同，因为EXTJS的MVC是针对前端开发特别设计的。EXTJS的MVC模式可以帮助开发者组织和管理复杂的用户界面，提高代码的可维护性和可扩展性。 在EXTJS4.0中，MVC的组成部分如下： 1. **Model**：模型层主要用于存储和处理数据。它是一个字段（field）及其对应数据的集合。EXTJS4中的模型知道如何自我持久化，通常通过 Stores 来管理并提供给诸如 grids、trees 等组件使用。模型可以定义数据验证规则，并且能够与服务器进行数据交互。 2. **View**：视图层负责呈现用户界面。EXTJS4支持多种视图组件，包括grids、trees、panels等。视图组件直接与用户交互，它们展示由模型提供的数据，并能响应用户的操作。 3. **Controller**：控制器是MVC架构的核心，它负责协调模型和视图之间的交互。控制器通过监听事件（尤其是来自视图的事件）来驱动应用程序的行为。在EXTJS中，每个控制器通常对应一个特定的功能模块或视图。例如，你可以定义一个`AM.controller.Users`来处理与用户相关的操作。 4. **Application**：EXTJS应用通常是通过`Ext.application`方法启动的，它定义了应用的基本配置，如应用名称、应用文件夹、所需的控制器等。`launch`函数在应用加载时自动执行，通常用于初始化主视图或整个应用程序的布局。 以下是一个简单的EXTJS4.0 MVC应用示例： ```javascript Ext.application({ name: 'AM', appFolder: 'app', controllers: ['Users'], launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ xtype: 'panel', title: 'Users', html: 'List of users will go here' }] }); } }); ``` 在这个例子中，我们定义了一个名为`AM`的应用，并指定了`appFolder`路径。`controllers`数组包含了我们要使用的`Users`控制器。`launch`函数则创建了一个全屏布局（viewport）的面板，显示“Users”标题。 5. **Controller定义**： ```javascript Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', init: function() { console.log('Initialized Users! This happens before the Application launch function is called'); } }); ``` 这里的`AM.controller.Users`控制器通过`init`方法初始化，它在应用启动之前被调用，可以在此处设置监听器和其他初始化操作。 EXTJS4.0_MVC的这种架构让开发者可以清晰地分离业务逻辑、数据管理和用户界面，有助于构建复杂而高效的应用程序。对于使用ASP.NET MVC3后端框架的开发者来说，EXTJS4的MVC模式提供了一种很好的前端实现方式，允许前后端的无缝协作，从而提升整体项目开发的效率。