《Ext JS实战》——1.4 Ext JS 3.0的新特性

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

1.4 Ext JS 3.0的新特性

Ext JS 2.0中引入的一些变化是颠覆性的，这就导致从级到2.0相当困难。这主要是因为这一版引入了一个更加现代的布局管理器以及一个崭新的、健壮的组件层次，许多Ext JS 1.x的代码都会因此而崩溃。值得庆幸的是，由于Ext JS 2.0的良好的工艺设计，从Ext JS 2.0到3.0的移植就非常容易了。尽管Ext JS 3.0新增的内容并不怎么神奇，不过最新的版本还是可圈可点的，有些新增的特性还是值得讨论的。

1.4.1 Ext JS通过Direct完成远程操作
Web远程调用是一种可以在JavaScript中很容易地执行服务器端定义的方法的机制。如果希望把服务器端的方法暴露给客户端，但又不希望和Ajax的连接管理打交道，用这种方法就非常方便了。Ext.Direct会替我们管理Ajax请求，并充当客户端的JavaScript与任意一种服务器端语言之间的桥梁。

这个功能有很大的好处，包括对方法的集中管理以及方法的统一。框架中有了这个技术后就能保证客户间的一致性，例如数据类。既然说到这里，我们就看看这个新增的Ext.Direct给数据类带来了哪些新的类。

1.4.2 数据类
Ext.data这个类是整个框架中处理所有数据的中枢。这个数据类负责数据管理的方方面面，包括数据的抽取、读、解析、创建记录，以及把记录加载到数据存储器。通过新加的Direct，Ext JS还同时增加了几个好用的Data类，包括DirectProxy和DirectStore，进一步简化了与Web远程调用的整合。

接下来，看看框架后台的变化和新增的一些UI部件。

1.4.3 新的布局
在Ext JS 3.0中出现了6个新的布局，包括AutoLayout、MenuLayout、BoxLayout、VBoxLayout和HBoxLayout。MenuLayout是对2.0版中菜单项的组织形式的一个改进。类似地，ToolbarLayout也给Toolbar增加了重要的特性，例如溢出管理，如图1-14所示。这两种布局既不是给它们的目标部件用的，也不是给最终用户用的。

图1-14 新的ToolbarLayout负责检查工具栏的大小，并且在菜单项要发生溢出时创建一个菜单存根

如图1-14所示，ToolbarLayout会检测到工具条中内容发生了溢出，然后会自动地创建一个菜单来包括并罗列剩余的项目，正是MenuLayout的变化才给这个功能提供了支持。

BoxLayout类是一个抽象类，也就是说，它并不是给最终用户使用的，而是为VBoxLayout和HBoxLayout类提供基本功能。VBoxLayout和HBoxLayout是对最终用户可用的，它是布局列表有用的补充。HboxLayout使得能够在水平方向上拆分容器的内容区域，而VBoxLayout的功能类似，不过是在垂直方向上拆分，如图1-15所示。

许多有经验的Ext JS开发人员可能会觉得HBoxLayout看起来像是ColumnLayout。尽管从提供的功能来看，二者确实相似，不过HBoxLayout的功能远超过了ColumnLayout的功能，它可以根据权重把它的子元素在垂直或者水平方向上拉伸，这也叫做弹性收缩。不过和ColumnLayout比起来，子元素不会在容器内折行。这两种布局把框架的布局功能引领到了一个新的高度。

除了在布局上的变化，GridPanel的支持类ColumnModel也有一些根本的变化。下面先看看这些变化，并弄清楚为什么这些变化有助于我们的开发。

1.4.4 网格中ColumnModel的增强
GridPanel部件用ColumnModel控制列的组织方式、大小设置以及显示。在Ext JS 3.0之前，每个列都是一个配置对象列表，这个列表用于ColumnModel。

对于ColumnModel中的每个列，都可以通过自定义的渲染器增强或者修改数据的显示方式，所谓渲染器其实就是一个方法，每一列的每个数据点都会调用这个方法，然后返回格式化的数据或HTML。这也就是说，如果要把日期格式化或者以某种特定方式进行显示，就必须自己配置。后来人们发现这种工作实在太多了。因此到了这一版，ColumnModel就朝着简化我们工作的方向进行了改变。

ColumnModel中的单个列进行了抽象，并创建了一个叫做grid.Column的全新的类。从此开始，许多好用的Column子类也就出现了，包括NumberColumn、BolleanColumn、TemplateColumn以及DateColumn，每一种都可以按用户的要求来显示数据。例如可以使用DateColumn并指定一个格式来显示格式化的日期数据。另一个可喜的变化是TemplateColumn，可以把XTemplate用于GridPanel，这样就可以很容易地把数据变成自己的HTML片段。不管使用哪一种Column的子类，都无须自定义渲染器。当然需要的时候也可以自定义渲染器。

许多应用程序都需要用表格的形式展示数据。尽管GridPanel是个不错的方案，但是对于只需要很少甚至完全不需要用户交互的普通数据展示来说，计算的代价还是太大。这时，ListView或DataView的扩展就有了用武之地了。

1.4.5 ListView
有了框架的这些新特性后，现在再用表格的形式展示数据就没有性能的损失了。图1-16显示了ListView的实际效果。尽管看起来和GridPanel一样，但是为了保证最佳性能，这里牺牲了例如拖放、列的重新排序以及用键盘导航等功能。这主要是因为ListView并没有例如之前讨论的ColumnModel之类的精致的、功能丰富的支持类。

用ListView来显示数据可以保证DOM操作的快速响应，不过别忘了它没有类似GridPanel的那些功能。到底用哪一个取决于应用程序的需求。

如果在屏幕上显示的数据总是文本数据，Ext JS确实不错，不过它缺少图形化的数据展示方式。我们看看Ext JS 3.0中又有些什么变化。

1.4.6 Ext JS中新增的图表功能
Ext JS 2.0中缺少的就是图表。值得庆幸的是，开发团队对社区的抱怨没有不闻不问，在Ext JS 3.0中引入了图表。这也是一个非常好的扩展，并且遵循了Ext JS的布局模型。

除了图1-17所示的折线图（Line）和柱状图（Colwn）处，框架还提供有条形图（Bar）、饼图（Pie）以及笛卡儿坐标Cartesian，图表满足数据可视化的需求。

图1-17 这些图表给框架带来了丰富的趋势数据，不过要注意这个新挂架需要Flash

现在所有的铺垫都做得差不多了。不过，还要先把框架下载下来并配置好，然后再讨论开发。