Ext JS 3.x的新特性

本文作者重点介绍了Ext JS 3.X的一些新特性及给开发富客户端应用程序所带来的方便。

我很幸运在 2007 年从事上一份工作时遇到 Ext JS。当我开始研究这个框架时，我 — 和其他很多人一样 — 觉得无处下手。尽管我的同事从 1.1 版本开始使用这个框架，我们最近才升级到 2.0 版本，它将框架结构重新架构。由于有了广泛的学习资源，例如 Ext JS 学习中心、社区创建和支持的学习手册维基网站及有用的论坛，我才能找到合适的资源并快速进步。

由于框架已重新架构，如果刚开始学习 Ext JS，会感到更加容易。框架的最新版本引入一组新的特性和更新包，将使开发更加容易。本文将介绍 Ext JS 框架中相对更重要和有用的更新。如果您正寻找开发 Ext JS 的入门指导，“Build applications with Ext JS”一文将是很好的选择。尽管它包含 2.0 版本，但这些内容对现有版本也很有帮助。

Ext JS 3.0 的第一个大的更新就是引入了一个新的发行版 Ext Core。尽管这个新的发行版仅仅是完整 Ext JS 库的抽象，但却引入了 Ext JS 开发的新思维。一般来讲，Ext JS 开发就是利用它的基本功能：UI 组件框架。这显然是其最先进的地方，远远超越竞争对手。然而，如果只是少量使用一点 Ajax 或查询，只是对 DOM 的一小部分设置风ge呢？这时 Ext Core 就发挥作用。原先作为其他流行框架如 Prototype/script.aculo.us 和 jQuery 的竞争对手，Ext Core 是轻量级发行版本，它包含您所希望的从现代 JavaScript 框架中希望获得的所有核心功能。从元素增强和 DOM 查询到 Ajax 和工具类，Ext Core 具有用于 JavaScript 高级开发的所有一切。

开发人员对于 Ext JS 曾经有这样的疑惑，它的授权封闭且昂贵。Ext JS 是一家以盈利为目的的公司，根据不同的使用目的（开源、商业和 OEM）支持不同的模式。尽管如此，框架仍是开源的，这得益于社区支持者进行用户扩展以及作为论坛版主为之奉献。在宽容和易于理解的 Massachusetts Institute of Technology (MIT) 许可之下，Ext Core 延续着这种开放性。

如上所述，当我开始学习 Ext JS 时，遇到的第一个小障碍就是学习曲线和从何处开始。Ext Core 的出现让事情变得简单多了，这是因为有了 Ext Core Manual。这是一份写得非常好的言简意赅的文档，它通过例子讲解了该版本提供的所有特性。再加以 Ext JS 学习中心其他资源的辅助，所需的文档支持就完全具备了。

有了 Ext Core 发行版，开发人员于是很自然地会试着将该版本的特性与其他流行框架如 jQuery 进行比较。jQuery，到目前为止，是市面上最受欢迎的 JavaScript 框架，而且实至名归。尽管如此，使用 Ext Core 却有一个独一无二的优势，而这一点我还未见相关讨论。使用 Ext Core 能让您熟悉 Ext JS 的所有基本函数，并让您更轻松地转换到使用 Ext JS 库。还有，Ext JS 的高级 UI 组件框架闻名于世，Ext Core 能很好地引领入门。

尽管每一个新版本中，Ext JS 团队似乎都声称内部存储得到加强，性能得到提升，但给人的印象总是华而不实。在这里我将介绍一些更加有趣和重要的更新。

所有的 UI 框架都会有某种网格。这是开发基于 Web 的富应用程序所最需要的小部件。Ext JS 认识到了这点，对这个重要组件做了大量更新。

Ext JS 网格长期以来一直支持直接在网格中编辑字段数据的方法。尽管这功能很棒，但只支持字段级编辑。作为 Ext JS 中的用户扩展(UX)，现在可以进行行级编辑，如图 1 所示。

　　{　header:　"Arrival　Date",　dataIndex:　"arrivalDate"　},　
　　{　header:　"Dinner　Choice",　dataIndex:　"dinnerChoice"　}　
　　 ]　),　
　　view:　new　Ext.ux.grid.LockingGridView(),　
　　title:　"Event　Planner",　
　　width:　350,　
　　height:　250　
　}　
);　

　　结果见图 2。

Flash 的。它们利用了 Ext JS 数据存储的能力和库中一个用于将数据连接到其他 UI 组件（如网格）的通用对象。有了对如折线图、柱状图、饼图、堆叠条形图的图表类型的支持，Ext JS 图表在很多应用程序中有了用武之地。但是，要实现更高级的图表，还要考虑实现更成熟的引擎，比如 Adobe Flex 中的那些引擎。 图 4 演示了 Ext JS 中的这三种图表。

服务器端的内容，但新的 Ext.Direct 包旨在客户端与服务器之间更畅通高效地沟通。

Ext Direct 能够像在客户端一样调用服务器端方法。可以通过实现任意一个服务器栈来完成，它将客户端请求路由到合适的方法。这种开发方法的一个最大好处是可以替换出服务器端技术，而不需要更新 JavaScript 代码。

Ext Direct 还利用了 Ext JS 数据存储，并减少了样板式代码，尤其是在创建和处理 Ajax 请求方面。您可以使用 Ext Direct 方法配置 DirectStore 而不必担心细节。

Ext Direct 本身就包含很多内容。

尽管 Ext JS 有了重大改进，但仍然有不足之处。在 Ext JS 中从来没有一个轻松的方法来创建自定义主题，现在这仍然是一个让人失望的地方。尽管 CSS 框架已分成结构化和可视化部分，但还未解决创建 Ext JS 组件的可视化渲染中用到的图片的需求。为 Ext JS 3.0 创建主题比以前版本更加直接，但由于组件需要大量图片，该解决方案尚未完工。

尽管本文介绍 Ext JS 3.1，最新的 Ext JS 3.2 中一些更酷的特性却值得一提。第一项关键特性是对多种存储排序和过滤的功能。我曾在一个 Ext JS 项目中想要实现这个特性，但没有足够时间自己实现。我认为这是对原框架添加的一项核心功能。

另一个很棒的特性是组合表单字段。有很多次我试图使用传统方法将多个字段布局到同一行，但徒劳无功，或者是产生的代码很难维护。

Ext JS 3.2 版本最后一个要提的特性是可访问性主题。Ext 一直努力将可访问特性引入框架，这一回很突出。有一个对应高对比度设计的大字体。

一项新技术最吸引我的特征之一就是它对我要完成的任务支持程度有多好。无论我是否要快速建立原型，添加一点 Ajax，还是构造一个全新框架，Ext 总能帮我顺利完成任务。