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打开了许多新的方式方法。

目录
相关文章
|
8月前
|
数据挖掘 BI
|
11月前
|
NoSQL 关系型数据库 MySQL
分布式系统学习9:分布式锁
本文介绍了分布式系统中分布式锁的概念、实现方式及其应用场景。分布式锁用于在多个独立的JVM进程间确保资源的互斥访问,具备互斥、高可用、可重入和超时机制等特点。文章详细讲解了三种常见的分布式锁实现方式:基于Redis、Zookeeper和关系型数据库(如MySQL)。其中,Redis适合高性能场景,推荐使用Redisson库;Zookeeper适用于对一致性要求较高的场景,建议基于Curator框架实现;而基于数据库的方式性能较低,实际开发中较少使用。此外,还探讨了乐观锁和悲观锁的区别及适用场景,并介绍了如何通过Lua脚本和Redis的`SET`命令实现原子操作,以及Redisson的自动续期机
1071 7
|
运维 IDE Java
操作系统智能助手OS Copilot评测
Java后端开发者兼技术负责人反馈,OS Copilot简化了系统操作和脚本编写,上手简单,给予新手友好体验。工作效能提升明显,评分8分。愿意推荐并期待开源,愿参与开发。基础命令问答、辅助执行和代码分析功能突出。相比其他产品,响应快、内容详尽,但局限于Linux。期望支持更多OS、IDE插件及图形化界面。尚未体验与其他产品联动,但看好其潜力。
200 0
|
缓存 前端开发 搜索推荐
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
790 0
|
小程序 Java API
阿里云短信服务详细说明与实战开发后端代码(一)
阿里云短信服务详细说明与实战开发后端代码
1514 0
|
存储 编解码 C++
C++ 音视频原理
C++ 音视频原理
252 3
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
277 0
|
Arthas 运维 监控
线上故障突突突?如何紧急诊断、排查与恢复
稳定性大于一切,因此我们需要有更有效的方式避免线上故障。在发生故障不可避免的假设下,我们需要能够快速修复,减少线上影响。基于以上这些想法,我们提出了 1-5-10 的快恢目标,所谓 1-5-10 的目标就是是要我们对于线上问题能够做到 1 分钟发现,5 分钟定位,10 分钟修复。下面将会介绍一些阿里云上关于故障恢复、诊断的一些最佳实践。
线上故障突突突?如何紧急诊断、排查与恢复
python绘图——绘制正负区分的柱形图[ax.bar()]
python绘图——绘制正负区分的柱形图[ax.bar()]
python绘图——绘制正负区分的柱形图[ax.bar()]
|
Web App开发 JavaScript 前端开发
【Vue五分钟】 Vue Cli脚手架安装配置
这个脚手架是一个基于Vue快速进行的开发的完成系统;是基于webpack构建开发的,带有合理的配置,可以通过项目的文件进行配置。
【Vue五分钟】 Vue Cli脚手架安装配置