富客户端程序设计实例 - 视图层(Ext JS) - Ext MVC Application Architecture 简介
Ext MVC Application Architecture 是ExtJS4.0开始引入的一种全新的开发模式。Ext本身作为一种视图层存在，但因为其开发复杂性为初学者所诟病。在ExtJS3.0时代Ext与后台交互需要程序员自己去实现，实现的方式各种各样，给后来人维护造成了很大不便。原引Sencha Docs的原始描述是这样的： (http://docs.sencha.com/extjs/4.2.1/#!/guide/application_architecture)
Large client side applications have always been hard to write, hard to organize and hard to maintain. They tend to quickly grow out of control as you add more functionality and developers to a project. Ext JS 4 comes with a new application architecture that not only organizes your code but reduces the amount you have to write.
Our application architecture follows an MVC-like pattern with Models and Controllers being introduced for the first time. There are many MVC architectures, most of which are slightly different from one another. Here's how we define ours:
Model is a collection of fields and their data (e.g. a User model with username and password fields). Models know how to persist themselves through the data package, and can be linked to other models through associations. Models work a lot like the Ext JS 3 Record class, and are normally used with Stores to present data into grids and other components
View is any type of component - grids, trees and panels are all views.
Controllers are special places to put all of the code that makes your app work - whether that's rendering views, instantiating Models, or any other app logic.
【图：FrameModel项目前台组织结构】
翻译大概就是：富客户端程序总是很难写，很难组织以及后期维护很困难。随着项目功能的快速增长，当开发人员在一个项目中添加更多的功能的时候，项目越来月难以控制。Ext JS4.0推出以后，随之而来的是一种新的应用程序结构。Ext JS 4的新结构不仅能组织你视图层的代码结构，而且还在此基础上显著减少你代码的编写量。
在4.0开始从结构上开始分层，划分成3层：Model(Store)、View 和 Controller。Store作用相当于数据库的某一个表；Model相当于Java中的某一个Entity(实体类或领域对象模型)。Ext.grid.Panel表中每一行的记录就相当于一个Entity对象。Model一般都会被引入到Store中。应当注意到“app”这个文件夹，当浏览器加载项目JS脚本的时候，首先会进入到app文件夹下，然后去寻找对应的controller、model、store 和 view这四个文件夹，他们是ExtJS核心加载的“依据关键字”。也就是说连同app在内的这五个文件夹是固定要添加在项目中的。
Yangcl 