Extjs_4.2.0_MVC教程.docx

Extjs 4.2.0 MVC 架构 来源于Ext互助团群。 内容：1. 文件结构2. 创建项目3. 定义控制器4. 定义视图5. 控制Grid6. 创建Model和Store7. 通过Model保存数据8. 保存到服务器端 大型客户端程序通常都难写，难组织，难以维护。项目经常由于增加功能，增加开发人员而很快失控。Ext JS 4提出新的项目结构，不仅组织你的代码，并且减少代码量。 我们的系统结构延续“类MVC模式”，第一次引入Models（模型）和Controllers（控制器）的概念。现在有很多MVC架构，他们或多或少有细微差别。以下是我们对MVC的定义： Model是字段和对应数据的组合（例如User Model有username和password两个字段）。Models知道如何通过数据包(data package)持久化，还可以通过associations（联系）同其他models关联。Models很类似于Ext Js 3里的Record类，通常与Stores一起将数据展现到grids和其他components上。 View可以是任何类型的component，grids, trees和panels都是视图。 Controllers 是一个特殊的地方，用来放使application工作的代码 - 可以是渲染视图的，初始化models的，或者其他的应用逻辑。 在这篇文档中我们将创建一个管理用户数据的简单应用，最终你将指导如何使用Ext JS 4应用架构去组织你的应用。 对系统架构来说，提供结构和保持一致性，与实际的类和framework代码同样重要。遵循我们的惯例可以带来一系列非常重要的好处： 所有的应用都以同一种方式工作，所以你只需要学习一次。 不同应用之间可以共享代码，因为他们都以同种方式工作 你可以用我们的build工具来创建你的系统的优化版本供production使用 1. 文件结构------------------------------------------------------------------------------------------------------------ Ext JS 4 对所有应用定义相同的目录结构。关于应用的基本文件结构的详细解释请参考Getting Started Guide. 应用MVC结构，所有的类都在app/文件夹下，依次包含子文件夹来命名你的models, views, controllers和stores。以下是我们做完这个简单的例子后，最终的文件结构： 在这个例子里，我们将整个application放到”account_manager”文件夹下，Ext JS 4 SDK里的必要文件放到 ext-4/文件夹下。因此我们的index.hmtl内容如下： html head titleAccount Manager/title link rel=stylesheet type=text/css href=ext-4/resources/css/ext-all.css script type=text/javascript src=ext-4/ext-debug.js/script script type=text/javascript src=app.js/script /head body/body /html2.在app.js里创建项目 Ext JS 4的所有应用都以Application这个实例作为入口。Application里包含你的应用的全局设置（例如应用的名称），并且维护此应用中所有models, views 和controllers的引用。Application同事包含launch方法，这个方法在加载时自动运行。 现在让我们创建一个简单的Account Manager应用来帮助我们管理用户账号。首先我们定义一个全局namespace。所有Ext JS的应用程序应该只使用一个单一的全局变量，应用所有的类都嵌套在这个全局变量中。通常我们希望这个全局变量短一点，所以在这个例子里我们使用“AM“： Ext.application({ requires: [Ext.container.Viewport], name: AM, appFolder: app, launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [ { xtype: pan