ExtJSMVC系列一：环境搭建与框架概览

近期项目需要使用Ext JS 4作为前端框架，因此本文将详细介绍Ext JS 4的MVC开发模式。该系列文章旨在帮助读者全面了解Ext JS 4的MVC框架。本文将从以下几个方面进行总结：

1. 项目目录结构
2. 相关CSS文件和JS文件的引用
3. MVC框架的整体认识

项目目录结构

Ext JS 4采用了统一的目录结构，类似于ASP.NET MVC。在MVC模式中，所有类都放置在app目录下，该目录包含四个子目录（每个子目录代表一个命名空间），分别是controller、model、view和store。项目目录结构图如下所示：

相关CSS文件和JS文件的引用

为了使Ext JS 4正常工作，我们需要在首页的head标签中引用ext-all.css、bootstrap.js和项目的入口文件app.js。具体引用方式如下图所示：

MVC框架的整体认识

为了更好地理解Ext JS 4的MVC开发模式，我们先来看一张图，然后进行具体说明。

1. 每个应用都有一个Application对象，应用采用单一入口结构，通过快捷函数Ext.application({config})创建并运行Application对象实例。Application在创建时会加载Controller类，加载完成后正式启动。
2. Application启动时会创建一个Viewport实例，Viewport充当界面的骨架，用于拼装各种View，如布局形式和窗体控件。一个页面只能有一个Viewport实例。
3. View是一个界面组件或窗体控件的集合（例如表单、网格和窗口）。通过Store加载数据并展示到界面上，界面控件的响应逻辑写在Controller中，View对Controller的存在无感知，没有代码上的依赖。
4. Controller扮演粘合剂的角色，加载时会帮助加载相关的Model、Store和View类。其主要作用是通过一系列事件处理函数（如点击保存按钮）定义每个View上界面组件对用户交互行为的响应方法。Controller通过control成员函数进行事件绑定，使用ComponentQuery组件以类似CSS选择器的语法定位界面上的组件，并为其绑定事件处理器。
5. Model是对抽象数据的具体化，可以理解为数据库中的一行记录。
6. Store是对通过网络加载数据过程的抽象，通过data发送请求（通常为AJAX请求）到后台获取数据（通常返回JSON格式）。Store依赖于Model，通过关联的Model对象知道如何将取回的数据对象化。

总结一下，MVC架构的好处在于将View和Model抽象出来，使其能够更好地复用。一个面板做好后可以在多个地方调用，业务逻辑则被封装在Controller中，便于模块化开发系统。

下一篇将介绍如何利用Application、Viewport和View进行应用程序的初始化和页面布局。