|
译文地址：http://blog./know-how/writing-a-big-application-in-ext/
在 Ext 中编写大型应用程序（第 1 部分） 12. April 2008 – 23:20 前言 我有决定为 Ext 2.x 的那些用户写这篇文章，他们已经从一个 HTML 页面和嵌入式脚本创建一个简单的窗口或表单长大，为那些已经确定 Ext 是方式的人和那些与太长的文件作斗争，很难搜索并感觉他们的应用程序需要一个结构。 解决问题的方法和解决方案的数量等于解决问题的人数。我将在下面的文本中描述的方式不是唯一的，我不想说应用程序要么按照我的方式编写，要么不好。没有那样的事。 我想说的是，这种方法可行，结构整齐，易于维护，简单地说：它有效！ 什么是“大应用”？ 如果你有一个带边框布局的视口、一个网格和一个表单都在一个文件中，它肯定不是大应用程序，对吧？。如果您有数十个窗口，每个窗口都有数十个文件中的网格、表单或边框布局，那么它肯定是位应用程序，对吗？ （德国人有一个很好的词：Jein，它是 Ja = Yes 和 Nein = No 的组合。） 以上两个陈述的答案都是 Jein。当应用程序变大时，然后呢？答案很简单：当你觉得它大时，它就会变大。当您开始在文件数量上定位自己或在一个文件中找到特定位置时遇到麻烦时，当您不再理解组件的关系等时，这就是点。我在这里给您写信，但想象一下一个 2-3 年级经验不足的程序员开始有这种感觉。 我们可以肯定地说，每个应用程序都很大，而且一个小应用程序也应该写得很好，而且随着我们开始添加新功能、编写新代码行、新 CSS 规则等，它可能会变得非常大。 开始新应用程序时最好和最安全的心态是：我正在启动大应用程序！ 文件和目录 这些我们首先需要组织起来。在 Apache 或其他 HTTP 服务器中总是配置有一个 ServerRoot 目录，所以我将在后面描述的所有子目录都与它相关。 推荐的目录结构： ./css（可选链接） ./ext（链接） ./img（链接） ./js index.html 上述结构中的链接是指向实际存储文件目录的软链接。优点是，例如，您将新的 Ext 版本下载到一个真实的目录，然后将上面的链接更改为指向那里，而无需更改应用程序中的一行，您就可以测试是否一切都适用于这个新版本。如果是，保持原样，如果不是，您只需将链接改回即可。 css 将保存您所有的样式表。如果您有带有公司颜色或字体的全局样式表，您也可以创建 css 目录作为链接。 ext 链接您的 Ext JS 库树，如上所述 img 链接到您的图像。它也可以包含图标子目录。 Node.js 将保存应用程序组成的所有 javascript 文件。 index.html HTML 文件，它是您的应用程序的入口点。您可以随意命名它，并且您可能需要更多文件，例如用于登录过程。无论如何，有一个应用程序入口点/文件。 您可以选择为应用程序的服务器端部分创建目录或链接（我有 ./classes）。您可以随意命名，但对于您编写的所有应用程序（./server、./php 是一些很好的例子）， index.html 的 最小化 index.html 文件内容是： 代码： <body></body> </html> 虽然您可以使用上述文件，但我建议您不仅向该文件添加描述性标题，还向您创建的所有文件添加描述性标题。“文件结束”标记也有它的价值。有关此类标头的示例，请参阅文件模式。 application.js 我们需要一个文件来放置 onReady 函数；我们称之为application.js。最低内容为： 代码： 您的页眉和页脚可能会有所不同，但确保您需要将 Ext.BLANK_IMAGE_URL 设置为指向您的服务器。这是 Ext 用作图像占位符的 1×1px 透明图像文件的路径，如果它指向无效位置，您可能会遇到各种渲染问题，例如缺少组合触发图像、缺少图标或类似问题。 您可能还需要为您的应用程序创建一个新的全局对象变量（这里是 Application）。 您需要确定的是 Ext.onReady，它是主要的应用程序入口点——您编写应用程序的地方。 css/application.css 如果有的话，你将把你的 css 样式表放到这个文件中。如果您只需要几条规则，似乎没有必要为它们创建一个单独的文件，将它们放在页面头部的 <style> 标签中似乎是更好的主意。 反之亦然，记住您正在编写一个大型应用程序，所以一切都必须有其位置。如果你早晚把样式放在页眉中，你会解决一些渲染问题，你不会知道样式在哪里。 错误的方式 当我们像现在这样拥有所有基础知识时，通常会发生什么？让我们开始写作。所以我们坐下来开始写： 等一下。这样我们很快就会在 application.js 中有 10,000 行，这就是我们最后想要的。显然，有些步骤缺失了，好像我们要创建一个如此大的文件，为什么我们不能首先将它写在 index.html 中？ 正确的方法：将其分解 即使是最复杂的整体也由较小的系统组成，而系统又由较小的部分组成，而这些较小的部分又由一些元素组成。您即将编写的大型应用程序也不例外。现在是识别这些部件、组件和它们之间关系的时候了。 所以，坐下来，考虑一下，画一个草图，列出一个清单，但结果是你必须知道你的应用程序将包含的组件，至少是最重要的组件。 预配置类 现在，您已经完成了应用程序分析并确定了它的组件，您可以开始编写第一个组件了。但是如何？最好的方法是编写具有所有配置选项的 Ext 组件的扩展类，否则作为配置对象传递，内置。我称此类扩展为预配置类，因为它们很少为基本 Ext 类添加太多功能，但使用它们的主要目的是配置它们。例如，要拥有一个包含人员特定列模型、存储、排序选项、编辑器等的“人员”网格。 如果我们有这样的，我们的窗口配置可能如下所示： 代码： 编写一个预配置的类 我们举个例子来讨论： 代码： 我们在这里做什么？我们正在扩展 Ext.grid.GridPanel，创建新的类（扩展）Application.PersonnelGrid，并将其注册为名为personnelgrid 的新xtype。 我们为通用网格面板提供了成为特定人员网格所需的所有配置选项。从现在开始，我们有了一个新组件，它是我们应用程序的构建块，我们可以在需要人员列表的任何地方（窗口、边框面板区域、独立）使用它。我们可以将其创建为： 代码： 组织预配置的类 上面的代码不需要也不应该在 onReady 函数中运行，因为它与 DOM 结构无关；它只创建一个新的 javascript 对象。因此它可以并且应该写在一个单独的文件中（js/Application.PersonnelGrid.js），并且它可以并且必须包含在 index.html 头文件中： <script type="text/javascript" src="./ js/Application.PersonnelGrid"><script>到目前为止一切都很好，我们几乎已经准备好了一切，而且（几乎）我们需要做的更多就是继续编写我们的预配置类，将它们放在 ./js 中；目录，将它们包含在 index.html 中，并从它们的实例构建您的应用程序，因为拼图是由碎片组装而成的。 看起来不错，是吗？ 无论如何，还有一点。 组件间通信 想象一下，我们需要一个边框布局，在西部有一个链接列表，在中心区域有一个选项卡面板。单击西方的链接将在中心创建一个新选项卡。现在，我们应该把它的逻辑、事件处理程序和创建例程放在哪里？在西部，还是在中心？ 他们都不是。为什么？如果我们有一个预配置的类来创建和显示西向链接列表，并且我们将上述逻辑放入其中，则没有中心区域就不再存在。我们只是不能在没有中心的情况下使用它，因为我们没有组件可以在其中创建选项卡。 如果我们将它放在中心，结果是一样的：没有西方，中心就不能存在。 唯一应该知道西面板和中心面板存在的组件是它们的带有边框布局的容器，这是唯一适合放置组件间通信的地方。 那我们应该怎么做呢？容器（带边框布局）应该侦听由西方触发的事件，并且应该在中心创建选项卡作为对这些点击的响应。以这种方式编写的组件通信示例可以在这里找到：Saki 的 Ext 示例 生产系统 随着我们继续编写我们的应用程序，我们碰巧很快就有大量包含的 javascript 文件（我目前在一个应用程序中包含大约 80 个，并且这个数字每天都在增长）。这会降低生产系统的性能。 解决它的最佳方法是按正确的顺序连接所有 javascript 文件以创建一个大文件，并使用一些 javascript minfying 或压缩工具将其缩小。此外，您不需要用于生产系统的 Ext 库的调试版本。 我们将在生产系统上包括： ext-all.js app-all.js 和 application.js 。 结论 这几乎就是全部内容……对于特定的 Ext 类有特定的技术，还有很多其他服务器和客户端的专有技术，但以上是总体概念。 快乐编码！ |
|
|
来自： 豪情万千dctctj > 《ExtJS 知识库》
