Ext 4 概述（四）之 ARIA、Data、Draw、Fx

Ext JS

参考资源

Intro to Ext 4 (video

Ext 4 Architecture (video)

通用问题

适配器（Adapters）

之前的各个Ext版本中都可以透过使用适配器（adpaters）的方式转换第三方的JavaScript库为我所用。Ext4的话就没这支歌仔唱了。改朝换代后，Ext JS应用程序的底层库唯一限定为Ext Core。不过我们依然可以继续让Ext Core与别的JS库共存于一个JS运行时（实际上这就是为什么一些JavaScript对象其原型的方法都被<a href="#lang">移至到Ext中</a>去的原因）。不同的就是Ext不依赖于其他JS的底层库了。

ARIA

为达到ARIA用户友好性的支持，而且是全面的支持，Ext对每一块组件都细心打造进而在这方面加强之。Ext.Component新设有ariaRole角色的配置项属性，默认是“presentation”（该角色仅表示为可见的并没有更高的含义，也没有用户交互的功能）。然后就让后面更高层次逻辑来覆盖它。例如，Ext.button.Button对ariaRole覆盖，标识为“button”，就表示这个是一个执行按钮语义的这么一个物件，这对屏幕阅读者（Screen Readers）非常有用。不论按钮外观上表现得如何，API在实际会在渲染按钮的过程中，对其标签中添加上一项HTML属性：role。总之，伴随着ARIA的增强，Ext于用户友好性（Accessibility）方面的提升大家应该是有目共睹的。

另一项ARIA重要的特性便是Ext.Component内建了aria-disabled支持。这一切都是自动进行的。当HTML标准属性aria-disabled激活的话，就会为屏幕阅读者（Screen readers）表示出某些功能化UI元素的激活状态。

Data

3.x的数据已经变化了不少，4.x继续重构并加入更多新的元素。但其中一点必须提到的，便是4.x的数据被设计成为能够与SenchaTouch共享的代码，也就说不论ExtJS或SenchaTouch使用同一套类库。有关这么方面的教程已经有不少了，这里我们就一些必要的背景内容和新特性作一番介绍。当然，如果尚未了解的读者还是建议你们阅读一下之前的教程或资讯：

参考资源

Proxies (blog post)

Ext JS 4的倒数：程序员预览

Ext JS 4 数据包的演示例子

客户端数据层的革新：引入ActiveRecord模式

概述

针对Ext 3的兼容化文件使得数据包得以连续可供Ext3使用。论变化最大者，有Store和Proxy和新引入的Model。Model实质便是Record的升级。

• Store 与数据格式无关，即不再存在JsonStore/XmlStore之分。其加载和保存数据都经过Proxy来执行，而Proxy的数据由来自于Reader或Writer是里。Store可执行客户端的多排序、动态过滤和动态分组，并与服务端同步亦可。
• Proxy 既可附加到Store也可直接附加到Model ，附加到Model的好处就是省去了处理Store的步骤。可以在配置Readers和Writers时候配置Proxy，从而来解码或编码来自服务器的数据。
• Model 也旧版的Record和相似，加入了关系、验证和更多的内涵 。

另外，Ext JS 4 也可以将Model持久化到本地存储，利用全新的LocalStrorageProxy类就可以无缝地把数据保存的HTML5的本地存储。

Draw

Draw包是全新的包没有一点Ext旧的包袱。Draw包具备自定义的绘图能力，通过抽象Canvas、SVG与VML引擎特性就可以根据当前浏览器的运行时选择最佳的绘图方式。Ext 4的<a href="#charting">图表</a>就是依赖于这个Draw包，不但如此，Draw包还可以拓展至其他类型的图形绘制。主要特性如下：

• 基于HTML5 标准
• 渲染原语形状文本、图形、渐变
• 操控颜色、矩阵转换等等的类库
• Ext.draw.DrawComponent
  • 继承自Ext.Component
  • 检测特性调优引擎
  • 可自定义引擎调优顺序
  • 可参与布局
• 通过Ext.draw.Sprite 内建块管理
  • 抽象的绘制元素
  • 常规化引擎API语法之间的差异
  • 属性
  • 事件支持（通过继承Observable）
  • 变形（旋转、转换、缩放）
  • 经由Ext.fx实现了动画
  • SpriteComposites

图表与图形化 Charting & Visualization

图表Chart不是好端端地用Flash做的吗？现在4.0却对Flash大声“say no”——回归网页标准的处理手法，要用Canvas/SVG/VML来做代替了Flash，命名空间就是Ext.draw.*。随着改进一些复杂的JS动画也成为可能。和Dojo一样终于有了属于自己的图形类库。虽然新图表可以顺利支持到IE6的浏览器，不过还是希望不要太冒进，能够继续使用3.x的Flash。图表引擎会自动选择适合当前浏览器的渲染引擎。无论采用哪一种的图表底层引擎，全体图表的函数都定义为同一种的API。这对用户开发至关重要。

参考资源

SenchaCon Overview (video)

SenchaCon Overview (slides)

 

Fx

Ext 3的Fx类提供了一组有用的元素特效效果（平滑、高亮、渐显等）。Ext 4基本上依旧不变，而且在简单的元素效果的基础之上，还有突破的发展，例如通过Animator类，可协调负责页面上同时运行的多段动画。再例如，无论调整大小还是定位都可以使用Fx”Target“类选择目标（全称Ext.fx.target.*），这为创建动态UI打开了许多新的方式方法。