Ext 4 概述(四)之 ARIA、Data、Draw、Fx

简介: Ext JS 参考资源 Intro to Ext 4 (video Ext 4 Architecture (video) 通用问题 适配器(Adapters) 之前的各个Ext版本中都可以透过使用适配器(adpaters)的方式转换第三方的JavaScript库为我所用。

Ext JS

通用问题

适配器(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使用同一套类库。有关这么方面的教程已经有不少了,这里我们就一些必要的背景内容和新特性作一番介绍。当然,如果尚未了解的读者还是建议你们阅读一下之前的教程或资讯:

概述

针对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。这对用户开发至关重要。

 

working-with-charts.gif

Fx

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

目录
相关文章
|
SQL 存储 分布式数据库
【通过Hive清洗、处理和计算原始数据,Hive清洗处理后的结果,将存入Hbase,海量数据随机查询场景从HBase查询数据 】
【通过Hive清洗、处理和计算原始数据,Hive清洗处理后的结果,将存入Hbase,海量数据随机查询场景从HBase查询数据 】
643 0
|
5月前
|
数据挖掘 BI
|
8月前
|
NoSQL 关系型数据库 MySQL
分布式系统学习9:分布式锁
本文介绍了分布式系统中分布式锁的概念、实现方式及其应用场景。分布式锁用于在多个独立的JVM进程间确保资源的互斥访问,具备互斥、高可用、可重入和超时机制等特点。文章详细讲解了三种常见的分布式锁实现方式:基于Redis、Zookeeper和关系型数据库(如MySQL)。其中,Redis适合高性能场景,推荐使用Redisson库;Zookeeper适用于对一致性要求较高的场景,建议基于Curator框架实现;而基于数据库的方式性能较低,实际开发中较少使用。此外,还探讨了乐观锁和悲观锁的区别及适用场景,并介绍了如何通过Lua脚本和Redis的`SET`命令实现原子操作,以及Redisson的自动续期机
907 7
成功解决ValueError: Input contains NaN, infinity or a value too large for dtype('float64').
成功解决ValueError: Input contains NaN, infinity or a value too large for dtype('float64').
|
缓存 前端开发 搜索推荐
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
649 0
|
网络协议 Java 关系型数据库
一篇文章彻底理解数据库的各种 JDBC 超时参数 2
一篇文章彻底理解数据库的各种 JDBC 超时参数
|
语音技术 物联网 程序员
51单片机智能小车(循迹、跟随、避障、测速、蓝牙、wifie、4g、语音识别)总结-2
51单片机智能小车(循迹、跟随、避障、测速、蓝牙、wifie、4g、语音识别)总结-2
51单片机智能小车(循迹、跟随、避障、测速、蓝牙、wifie、4g、语音识别)总结-2
|
存储 传感器 人工智能
ESP32 使用RS485模块实现Modbus通信
ESP32 使用RS485模块实现Modbus通信
824 0
|
小程序 Java API
阿里云短信服务详细说明与实战开发后端代码(一)
阿里云短信服务详细说明与实战开发后端代码
1166 0
|
网络协议 应用服务中间件 调度
在实战中使用nginx-rtmp遇到的TCP连接问题分析
在实战中使用nginx-rtmp遇到的TCP连接问题分析 背景 前段时间公司做了一次体育赛事的现场直播,网络由某通信公司负责搭建,主要测试5G CPE上行网络的带宽和稳定性,为了做到万无一失,他们同时搭建了一条用作备份的400M光纤线路。
2724 0

热门文章

最新文章