[翻译]ExtJS教程-MVC架构.docVIP

大规模的客户端应用程序常常难于去编写、组织机构和维护。随着你加入更多的功能，并且投入更多的开发人员，它们渐渐趋向于失去控制。ExtJS 4 带来了一种新的不仅仅能规整你的代码组织结构，而且能限制你要编写的代码数量的应用程序架构。 我们的应用程序架构承载于一种类MVC的模式，第一次推出了模型和控制器。现在已经有很多MVC架构了，它们之中大部分只有一些轻微的不同之处。 模型是域和它们的数据的一个集合（比如：一个拥有姓名和密码的用户模型）。模型指导怎样通过数据包（package）将它们自身持久化，并且能使用关联连接其它的模型。模型工作起来很香ExtJS 3中的Record类，而且一般同Stores一起用来在表格（grid）和组件中展示数据。 视图表示任何类型的组件 - 表格、树，还有面板等都是视图。 控制器是放置能够使你的应用工作的所有代码的专有位置 - 不管是渲染视图，初始化模型，还是任何其他的应用逻辑。 在这个指南中我们将会创建一个简单的用于管理用户数据的应用程序。在最后你将会指导如何使用心得ExtJS 4 应用程序架构将简单的应用程序组织到一起。 应用程序架构提供了架构和一致性的意义和提供了实际的类和框架代码一样重要。遵循这个约定将获得许多重要的好处： 每一个应用程序都以同样的方式运作，因而你可以只用去学一次（就掌握其工作原理）。 因为它们都以同样的机制工作，因此在应用之间共享代码是很容易的。 你可以使用我们的工具创建优化的应用程序版本用于生产环境。 文件架构 ExtJS 4 遵循对每个应用都一样的一个统一的目录结构。请浏览入门指南中关于基本的文件架构的详细解释。在MVC布局中，所有的类都放在app文件夹中，里面一次放着区分你的模型、视图、控制器和存储（store）的命名空间的文件夹。下面是当我工作完成以后的一个简单的示例应用的文件结构： 在这个例子中，我们将整个应用程序封装到一个称作“account_manager”的文件夹中。来的 ExtJS 4 SDK 的必备文件放入了 ext-4文件夹。因而我们的index.html 看起来像这样： 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 /html 在 app.js 中创建应用程序 每一个ExtJS 4 应用程序都是从一个Application类的实例起步。Application 包含着你整个应用程序（比如应用的名字）的全局设置，也维护着所有应用使用到的模型、视图和控制器的引用。一个Application也包含一个启动函数，它将在所有东西都加载完了以后自动运行。 让我创建一个能够帮助我们管理用户账户的简单账户管理应用。首先我们需要为这个应用程序取一个全局的命名空间。所有ExtJS 4应用程序都应该使用一个单独的全局变量，将应用程序的所有类网络其中。我们常常想着要一个简短的全局变量，因此这个例子中我们将使用“AM”： Ext.application({ requires: [Ext.container.Viewport], name: AM, appFolder: app, launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [ { xtype: panel, title: Users, html : List of users will go here } ] }); } }); 这里将发生着几件事情。首先我们调用了 Ext.application 去创建一个新的Application类的实体，我们把名称‘AM’传给了它。这样就自动的为我们设置了一个全局变量 AM，并且向 Ext.Loader 注册了命名空间，附带通过 appFolder 配置选项设置了对应的与其（命名空间）对应的