内容


Ext JS 新特性

Comments

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

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

介绍 Ext Core

Ext JS 3.0 的第一个大的更新就是引入了一个新的发行版 Ext Core。尽管这个新的发行版仅仅是完整 Ext JS 库的抽象,但却引入了 Ext JS 开发的新思维。一般来讲,Ext JS 开发就是利用它的基本功能:UI 组件框架。这显然是其最先进的地方,远远超越竞争对手。然而,如果只是少量使用一点 Ajax 或查询,只是对 DOM 的一小部分设置风格呢?这时 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 所示。

图 1. 网格行编辑器
屏幕显示可选择和编辑字段。
屏幕显示可选择和编辑字段。

下一个网格特性省了我不少事。我通常要用到 Minimum Data Set (MDS),这是 U.S.Centers for Medicare and Medicaid Services 的一种文件规范。该文件规范用来表示用于所有居民的获准参与医疗保险和医疗救助的专业护理设施的筛选和评估工具。可以想象,这样的政府文件规范很严格,包含 700 个评估字段。我曾经做过在一个网格中允许浏览所有 MDS 评估字段元数据的 Ext JS 项目,但在滚动内容和改变面板大小时遇到性能问题。这时新的网格 BufferView 救了我。通过将标准网格视图换成缓存视图,只改了一两行代码,程序运行如常。BufferView 只提交可见网格的单元格,而不是在改变布局大小时连续提交 700 行数据,而这只是其中一部分。这项特性也是 UX,并作为实验性的;尽管如此,其实用性却让我甘愿冒这个险,在内部应用程序中使用。

我将介绍的最后两项网格更新很简单,也很有用。通过使用 UX,可以将网格中的列锁定,以及将网格列合并成组。当您想要在滚动或查看其他列数据时冻结一个或一组列时将会很有用。为了启用列锁定,需要实现 LockingColumnModelLockingGridView 元素,如清单 1 所示。

清单 1. 网格列锁定
// grid which supports column locking
// just need to specify the locking version of the column model and grid view
var grid = new Ext.grid.GridPanel(
  {
    store: dinnerData,
    colModel: new Ext.ux.grid.LockingColumnModel( [
      { header: "Name", dataIndex: "name", id: "colName" },
      { header: "Arrival Date", dataIndex: "arrivalDate" },
      { header: "Dinner Choice", dataIndex: "dinnerChoice" }
    ] ),
    view: new Ext.ux.grid.LockingGridView(),
    title: "Event Planner",
    width: 350,
    height: 250
  }
);

结果见图 2。

图 2. 网格列锁定
屏幕显示 4 列和滚动条。第一列已锁定,不会滚动。
屏幕显示 4 列和滚动条。第一列已锁定,不会滚动。

对列标题分组将会使网格数据看上去更清晰更灵活。图 3 就是一个例子。

图 3. 网格中分组的列标题
屏幕显示 2 个子列在 Canada 和 United States 主标题下。
屏幕显示 2 个子列在 Canada 和 United States 主标题下。

图表

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

图 4. 图表举例
屏幕显示折线图、柱状图和饼图示例的例子。
屏幕显示折线图、柱状图和饼图示例的例子。

布局

Ext JS 中增加的还有 HBoxVBox 布局以及 ListView 控件。HBoxVBox 是原先就有的简单的水平和竖直布局管理器。由于有了对间距和对齐配置的很好支持,这些布局类似于其他富应用程序框架(如 Flex 和 Microsoft® Silverlight)中所支持的布局。

ListView 控件是网格视图的轻量级控件。它支持模板,因此可以根据实际需要提交数据,同时也支持所需的基本网格特性,如列缩放。尽管它也支持可选择的界面,但不支持水平滚动和编辑。图 5 就是 ListView 控件的例子。

图 5. ListView 的例子
屏幕显示名字标题和一组名字。
屏幕显示名字标题和一组名字。

工具栏、菜单和表单

工具栏有两项关键的更新让我觉得很酷。第一项是自动处理工具栏项溢出。当容器缩放导致工具栏项目切除时,Ext JS 通过创建额外工具栏项目菜单来自动处理这种溢出。这项特性很简单但很有用,因为可以不必考虑自己处理。现在工具栏还可以将按钮分组,从而形成带状工具栏。按钮可由不同类型组合而成,并支持各种布局。

表单在 ux 名称空间增加了一个新的字段类型,名为 SpinnerField。 尽管这项扩展已经存在了一段时间,Ext JS 将其作为 Ext JS 3.0 示例套件的一部分发布。这是很好的添加,它允许传递数字、日期和时间以及其他基于数组的数据。

本小节未涵盖 Ext JS 组件框架的所有更新。想要了解完整信息,请查阅 参考资料

Ext Direct

您通常不会想要 JavaScript 框架过多关注服务器端的内容,但新的 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 创建主题比以前版本更加直接,但由于组件需要大量图片,该解决方案尚未完工。

3.2 版本的改进

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

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

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

结束语

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


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=521884
ArticleTitle=Ext JS 新特性
publish-date=09152010