《Ext JS实战》——第1章 独特的框架 1.1 认识Ext JS

本节书摘来自异步社区《Ext JS实战》一书中的第1章，第1.1节，作者：【美】Jesus Garcia著，更多章节内容可以访问云栖社区“异步社区”公众号查看

第一部分　Ext JS介绍

欢迎阅读《Ext JS实战》，本书是对Ext JS世界的深度之旅。在本书中，不仅要学习如何利用Ext JS框架完成各种任务，还会学习构成框架的各种组件和部件之间的差异。

通过第1章到第3章的学习，我们能够对框架的基础部分有必要的理解。我们的旅途从第1章正式起航，在第1章会学习框架的基础知识。第2章是“热身”章，会了解一些能让应用程序正确运行的关键要素。第3章会涉及框架的一些内部机制，例如组件模型和容器模型。

学完这一部分后，就可以探索Ext JS中大量的部件了。

第1章 独特的框架

不妨设想一下，现在要完成这样一个任务：要为用户开发一个包含菜单、Tab、数据表格、动态表单、漂亮的弹出窗口等典型UI部件（UI widget）1的应用程序。你可能会希望能有一些编程手段帮你控制这些部件的摆放，也就是能够控制布局。还希望有详细的、集中组织的文档可以帮助你降低框架的学习曲线。最后，这个应用程序需要是成熟的，能够尽快地通过beta阶段，也就是说，不需要在HTML和CSS上花费太多时间。那么，在开始输入第一行代码之前，必须确定下来使用哪种方法开发界面。你会选什么呢？

对市面上流行的函数库进行一番调查后，你很快就发现所有这些库都可以操作DOM，但是其中只有两个带有成熟的UI库，这就是YUI（Yahoo！User Interface）和Ext JS。

很有可能第一眼看到GUI就再也不想看它了。只要做几个YUI提供的例子，就会意识到，尽管它看起来好像很成熟，可是还不具备专业的品质，开发人员得自己去修改CSS。开发人员可能都不愿意这么做。要想找到一个方法或者一个类，得来回的滚动页面，仅仅由于左边的导航板太小的缘故，有些类甚至都被截断了。Ext JS如何？肯定会更好一些吗？我们该如何选择呢？

这一章里，我们会好好看看Ext JS，了解该框架中的一些部件。等完成了这一部分之后，我们就要下载Ext JS测试一下。

1.1 认识Ext JS

由于要开发一个带有丰富图形界面（UI）控件的RIA程序（即富互联网应用），我们找到了Ext JS，并且发现它确实名不虚传，Ext JS提供一套丰富的DOM工具和部件。尽管那些示例页面所展现出来的东西已经让我们兴奋不已，但其实隐藏在底下的东西更会让让我们热血沸腾。Ext JS带来了一整套的布局管理工具，我们完全可以按照自己的需要对UI元素进行管理和控制。这是因为有一层所谓组件模型（Component model）和容器模型（Container model），这两个模型在UI元素构建的过程中各自扮演着重要的角色。

组件模型和容器模型
Ext JS中的组件模型和容器模型对UI元素的管理扮演着至关重要的角色，这也是Ext JS要优于其他Ajax函数库和框架的原因之一。组件模型决定如何对UI部件实例化、如何渲染一直到如何销毁这么一个过程，这个过程也叫做组件的生命周期。而容器模型控制着每个部件如何管理（或者容纳）其他的部件。要想理解整个框架，这是两个关键部分，因此我们会在第3章在这两个主题上花费大量的篇幅。
Ext JS框架中差不多全部UI部件都是高度可定制的，所有的特性都提供了启用和禁用的选项，提供了重载函数，可以自定义扩展和插件。一个充分利用Ext JS的Web应用实例就是Conjoon。图1-1显示的就是一个Conjoon的真实截屏。

Conjoon是一个开源的个人信息管理系统，它可以看作是用Ext JS开发的Web应用程序的缩影。它几乎使用了框架中所有的原生UI部件，并且还演示了如何把框架和类似YouTubePlayer、LiveGrid和ToastWindow的由用户定制的扩展进行很好地集成，可以获得Conjoon的副本。

现在，已经知道了Ext JS可以用于创建完全页面化的Web应用程序了。但是，如果面对的是一个已经投入生产线的应用程序又该怎么办呢？接下来，就要了解Ext JS是如何与已有的应用程序或者Web站点相整合的。

图1-1 Conjoon是一个开源的个人信息管理系统，它是一个很典型的Wed应用程序示例，使用了框架来管理利用了整个浏览器窗口的用户界面

1.1.1 和已有的站点整合
想在已有的Web页面或者站点中嵌入任意部件都很容易，而且可以给你的用户带来如同两个世界的最好体验。Dow Jones Indexes站点就是一个包含了Ext JS的引人入胜的站点范例，图1-2显示的就是djindexes.com中的一个集成了Ext JS的页面。

Dow Jones Indexes的这个Web页面使用了Ext JS的TabPanel、GridPanel和Window（不可见）几个部件，它的访问者可以获得丰富的数据交互视图。用户可以在主GridPanel中选择的一行记录，很方便地对股票视图进行定制，这会触发一个到服务器的Ajax请求，并在表格下面得到一个更新过的图形。单击下面的时间按钮，那些不属于Ext JS的图形也会得到修改。

现在已经知道了Ext JS可以用于构建单页面的应用程序或者可以和已有的多页面应用程序集成。但是还没有满足我们对于API文档的需求。Ext JS又是如何解决的呢？

图1-2 Dow Jones Indexes的站点，站点中继承Ext JS的范例

1.1.2 富API文档
第一次打开API文档时（见图1-3），你就能够感受到这一框架的精良。和其他框架不同，Ext JS的API文档完全是利用它自己的框架展示了一个清晰的、容易使用的文档工具，而且是通过Ajax来提供文档的。

我们会探讨API的全部特性，并会讨论在这个文档工具中用到的一些组件。图1-3说明了在这个Ext JS API文档程序中用到的一些组件。

API文档工具用到了6个最常用的部件，包括Viewport、TreePanel、嵌套了TextField和Toolbar Buttons的Toolbar以及TabPanel。你肯定想知道这些部件都是什么，它们都是干什么用的。那么我们就先花点儿时间讨论一下这些部件。

我们从外向内看，Viewport是一个利用了浏览器全部的可视空间的类，它为UI部件提供了一个由Ext JS管理的画布。它是构建完整的Ext JS应用程序的基础。BorderLayout是常用的布局管理器，它把Viewport（或者任何容器）分成了5个区域。在这个例子中用到了3个区域：North（顶部）区域，用于页面的标题、链接和Toolbar；West（左侧）区域，包含了一个TreePanel；Center区域（右侧），包含了用来显示文档的TabPanel。

图1-3 Ext JS API文档提供的信息非常丰富，是学习更多组件和部件的好地方。你需要知道的API内容这里全部可以找到，包括构造配置选项、方法、事件、属性、组件层次关系等

Toolbar可以用于展示诸如Button和Menu这类常见的UI组件，不过它也可以展示任何一种属于Ext.form.field子类的东西，就像这个例子中所展示的。我喜欢把Toolbar等同于常见的“文件”→“编辑”→“查看”菜单，各种流行的操作系统和桌面应用程序中都有这种熟悉的工具条。TreePanel是以一种树状的形式展示具有层次关系的数据，就像Windows Explorer中显示的磁盘目录一样。TabPanel允许在一个画布上同时存在多个文档或者控件，但某一时刻只能有一个是激活的。

使用这个API很容易。要查看哪个文档，在树上单击类节点即可。这样就发出一个提取指定类的文档的Ajax请求。每个类的文档实际都只是一个HTML片段（不是一个完整的HTML页面）。利用Toolbar上的TextField，只需要敲几个键就可以轻而易举地对类树进行过滤。如果能连接到网络，还可以在API Home选项卡中对API文档进行搜索。

好了，完整的文档也有了。但对快速应用程序开发有什么好处呢？Ext JS能加快开发周期吗？

1.1.3 通过预置的部件进行快速开发
Ext JS提供了许多必需的UI元素，这些元素都已经做好了，拿来就可以用，所以利用Ext JS可以把开发人员的概念快速地转换成原型。还有，这些东西都已经是现成的，不用我们再费事了，因此也可以大量地节省时间。而且绝大多数场合下，这些UI元素都是高度可定制的，完全可以按照应用程序的需求进行修改。

1.1.4 与Prototype、jQuery、YUI结合使用以及在AIR中使用
尽管我们一直在讨论Ext JS如何有别于其他的函数库，例如YUI。不过，也可以配置Ext JS使用这些框架作为基础，这很容易做到。这就意味着如果已经正在使用其他的这些函数库，没有必要为了享受Ext JS UI的精致而放弃它们。

尽管我们不打算讨论如何在Adobe AIR中开发Ext JS应用，不过需要知道框架本身已经提供了一套完整的工具类帮助和AIR的集成。这些工具类包括例如音频管理、视频播放面板以及对桌面剪贴板的访问。本书不打算深入研究AIR的内容，但是对于在Adobe AIR中进行Ext JS开发所需要知道的这个框架的许多重要内容都会涉及。