原文:What’s New in Ext JS 5.0.1

今天,我们很高兴的宣布Ext JS 5.0.1发布了!此维护版本基于Sencha社区的反馈做了一些改进。

下面让我们来了解一下这些改变。

可访问性

与Ext JS 4.2.2一起,我们发布了“ext-aria”包来为可访问性提供了改进的支持(如WAI-ARIA 1.0标准中所描述的)。对于提供工具来让提高应用程序的可访问性来说,这是很重要的一步,我们还从测试合作伙伴和早期采用者的反馈意见中学到了一些东西。

随着Ext JS 5的发布,我们希望能综合反馈意见并提供一个更好的解决方案。我可以很高兴的宣布,对于Ext JS 5.0.1,对于可访问性的支持已经改进了许多。很大程度上,这是因为我们已经将焦点和键盘导航的支持从“ext-aria”移动到了框架本身。

焦点

在Ext JS 5.0.1,我们大大的改进了焦点的内部处理方式以便更好的符合可访问性标准。核心组件(如按钮、标签、表单字段和网格)现在可以完全提供一个清晰、视觉指示的焦点。这是可访问性应用程序的关键需求。为了让你可以完全控制这些新的视觉方法的东西,我们已经添加了几个新的Sass变量和混入(mixin)参数。

键盘导航

之前版本的Ext JS会使用Ext.FocusManager来辅助管理焦点。虽然该类仍然存在,但它不再是推荐的方法。相反,所有组件现在都带有“focusable”属性,可用来管理DOM属性tabIndex。将该属性设置为true的任何组件都可通过单击或键盘来接收焦点。

当这些可获得焦点的组件被放置在某些容器(如工具栏)时,容器会提供箭头键盘导航并可管理容器内的哪一些条目可以接收焦点。

还有许多与可访问性、焦点和键盘导航改进有关的信息,要想详细了解这些,可以阅读可访问性指南

视图模型

在很大程度上,已经看到了开发人员是如何迅速的拿起视图模型和数据绑定。除了一般的bug修复外,还有一些值得注意的改进是与绑定有关的。

选择绑定

许多开发人员已经要求我们在哪些支持选择的组件上扩展绑定属性的能力(如组合框、网格、树、Breadcrumbs等等),以便支持选择。

现在,在同步的时候,可以使用绑定来保持这些组件的选择,有关这方面的详细信息,可参阅Kitchen Sink示例。

模型和字段验证

表单字段的一项关键改进是,现在在更新他们的绑定属性之前,双向绑定会验证值是否有效。为了实现这个,在将模型绑定到字段的时候,表单自动现在会获取模型的验证并将它包含在自己的验证里。

在Ext JS 5.0.0,这些验证只在第一次返回值(可能是无效的)的时候作为参考。而在Ext JS 5.0.1,终于可以放心了,因为无效值将永远不糊返回到记录中。

数据

在此版本,Ext.data也有一些重要的修复和改进。

TreeStore vs 节点事件

在Ext JS 5.0.0,TreeStore类被重构为派生于Ext.data.Store。然而,在此过程中,存在一个关键问题:TreeStore不会从根节点(Ext.data.NodeInterface)传播事件。

对于大多数由树节点除非的事件来说,一切如常。不过,某些节点事件在创建监听的时候可能会与存储事件发生冲突,如remove事件。

对于这个问题,唯一安全和有效的修复是,在将所以节点事件作为TreeStore事件触发之前,在事件前添加前缀node,这意味着节点的remove事件现在会作为TreeStore的noderemove事件触发。在维护版本中,我们一直在努力去避免这种更改,但这实在是没有其他办法在不破坏任何接单监听或存储监听的情况去解决这个问题。对于这种变化造成的不便,我们深表歉意。

关联

在Ext JS 5.0.0中,对于关联的限制是,如果你要创建一个新记录然后删除该记录,就会发现没有清理逻辑来处理它潜在的子记录,这可能会造成生成、创建或更新这些子记录的操作会话,但在服务器端却无法处理这些操作,因为没有父记录不存在。

在Ext JS 5.0.1中,在移除记录的时候,被声明为模型之间父所有者或子所有者的reference字段会被作为参考,当表示的是这种类型的关联时,移除记录将会自动去删除他的子记录。

例如:

    Ext.define('App.model.Order', {
extend: 'Ext.data.Model',
// ...
}); Ext.define('App.model.OrderItem', {
extend: 'Ext.data.Model', fields: [{
name: 'orderId', // Indicates that the referenced Model (Order) owns these
// records:
reference: { parent: 'Order' }
}]
});

这样,当Order被移除(标记为删除)的时候,它的子OrderItems将同样被移除:

 order.drop();

另外,设置父的references为null(例如,通过与父的关联存储删除它)也可以清理这些记录:

   order.orderItems().removeAt(0); // removed orderItem is dropped

   order.orderItems().getAt(0).setOrder(null); // also drops this item

服务器仍然可以负责最终的完整级联删除,不过上述处理需要确保客户端永远不会在保存操作中引用移除的记录。

    Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container', mixins: [
'Ext.mixin.Responsive'
], responsiveFormulas: {
small: 'width < 600',
medium: 'width >= 600 && width < 800',
large: 'width >= 800', tuesday: function (context) {
return (new Date()).getDay() === 2;
}
}
});

在以上代码中,新的值(small等)就可以使用在其他的responsiveConfigs中。这有助于简化应用程序的responsiveConfigs,以及在一个地方维护这些选择。

图表

“Sencha-charts”包也有几个改进,如可重用的标记(箭头、菱形等)。对于那些不使用Sencha Cmd的初学者来说,sencha-charts包已经包含在Ext JS 5.0.1的生成包中。最显著的改变是在文档中已经说明了如何去创建自定义图表的主题。

图表主题

在Ext JS 5.0.0,可以为图表选择附带的几个内置主题,不过创建自定义主题则没有任何文档进行说明。在当前版本,已经提供了这种能力,从而你可以制作自己的调色板和其他更多东西。

图表的主题是一个派生于Ext.chart.theme.Base,且别名是以“chart.theme.”开头的类,基本的主题就像以下代码那样简单:

    Ext.define('App.chart.theme.Awesome', {
extend: 'Ext.chart.theme.Base', singleton: true,
alias: 'chart.theme.awesome', config: {
baseColor: '#4d7fe6'
}
});

这样,就可以在图表系列、坐标轴和标记中任意使用这些恶配置了。如要了解所有选项,可阅读有关的可用配置API。要使用新创建的主题,可以在图表中设置theme配置项:

  theme: 'awesome'

Sencha Cmd

最后但并非不重要的是,在Sencha Cmd 5.0.1中,已经扩展了app.json的选择,拥有了更多的细粒度的控制来配置东西,以满足所需,而不需要深入研究生成脚本。

输出

为了一窥这些有用的新控制,我们来研究下输出对象。在某些环境中,最常见的要求是要在文件夹之外保持“标记”文件以表明Sencha应用程序所在,例如:

    foo.php
foo/
app.json
app.js

与模型不同的是,标记文件(以上是foo.php,不过也可以是其他任何东西)是在父文件夹,在之前版本,这要求设置几个生成属性。在Sencha Cmd 5.0.1,可以在app.json中实现:

    {
...
"indexHtmlPath": "../foo.php", "output": {
"page": {
"path": "../foo.php",
"enable": false
}
}
}

以上代码就可禁用生成步骤,以确保所有路径都会根据父文件夹来计算好相对路径后再重写标记文件。输出对象还可以控制生成输出方面,从启用编译器优化到调整微加载方面等许多东西。

打包

Cordova和PhoneGap现在通过使用新的packager属性可以获得更多灵活性且易于使用。新的设置允许直接在app.json中生成指定的包(cordova或phonegap)。结合builds对象(在Sencha Cmd 5.0.0中加入),还可以在应用程序生成是选择是生成web的,还是iOS的,还是安卓的。

例如:

    {
...
"builds": {
"web": {
"default": true // picked by "sencha app build"
},
"ios": {
"packager": "phonegap",
"phonegap": {
"config": {
"platform": "ios",
"remote": true // use PhoneGap Build
}
}
},
"android": {
"packager": "phonegap"
"phonegap": {
"config": {
"platform": "android" // use Local Phonegap
}
}
}
}
}

以上代码,可以使用以下代码来生成:

  sencha app build

以上代码是用来生成Web生成的。现在还可以这样进行生成:

    sencha app build ios
sencha app build android

当然,要这样必须先安装PhoneGap,且需要配置PhoneGap的生成凭证。此外,还可以删除上面的“remote”配置并切换为“cordova”包(如果已经拥有Cordova或一个iOS开发环境)。

除了以上形式,还可以看到这些属性如何去清理生成过程。使用这种方法,还可以将“testing”添加到任何生成,以获取用于调试的非压缩的javascript代码(在之前版本需要手动调整某些东西)。

小结

Ext JS 5.0.1和Sencha Cmd 5.0.1提供了很多所需的重要改进。在所有这些Ext JS 5的新功能中,我们很期待的他们会在你的应用程序中发生什么了不起的事情。下载它并试用一下,然后,在论坛里告诉我们你的想法。

作者:Don Griffin
Don Griffin is a member of the Ext JS core team. He was an Ext JS user for 2 years before joining Sencha and has over 20 years of software engineering experience on a broad range of platforms. His experience includes designing web application front-ends and back-ends, native GUI applications, network protocols and device drivers. Don’s passion is to build world class products that people love to use.

【翻译】Ext JS 5.0.1 中的新功能的更多相关文章

  1. 【翻译】在Ext JS 5应用程序中怎样使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简单介绍 Ext JS 5是一个重要的公布版本号,它提供了很多新特性来创建丰富的.企业级的Web应用程序.MVV ...

  2. 【翻译】在Ext JS 5应用程序中如何使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双 ...

  3. 在Ext JS 5应用程序中如何使用路由

    简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...

  4. Docker 1.12.0将要发布的新功能

    Docker 1.12.0将要发布的新功能 导读 按计划,6/14 是1.12.0版本的 feature冻结 的日子,再有两个星期Docker 1.12.0也该发布了.这里列出来的新功能,都是已经合并 ...

  5. ECMAScript 2016,2017 和 2018 中所有新功能的示例

    很难追踪 JavaScript(ECMAScript)中的新功能. 想找到有用的代码示例更加困难. 因此,在本文中,我将介绍 TC39 已完成 ES2016,ES2017 和 ES2018(最终草案) ...

  6. [转]ECMAScript 2016,2017 和 2018 中所有新功能的示例

    很难追踪 JavaScript(ECMAScript)中的新功能. 想找到有用的代码示例更加困难. 因此,在本文中,我将介绍 TC39 已完成 ES2016,ES2017 和 ES2018(最终草案) ...

  7. 微信小程序0.11.122100版本新功能解析

    微信小程序0.11.122100版本新功能解析   新版本就不再吐槽了,整的自己跟个愤青似的.人老了,喷不动了,把机会留给年轻人吧.下午随着新版本开放,微信居然破天荒的开放了开发者论坛.我很是担心官方 ...

  8. SQLSERVER2014中的新功能

    SQLSERVER2014中的新功能 转载自:http://blog.csdn.net/maco_wang/article/details/22701087 博客人物:maco_wang SQLSER ...

  9. PhotoZoom Classic 7中的新功能

    众所周知PhotoZoom Classic是家庭使用理想的放大图像软件.目前很多用户还在使用PhotoZoom Classic 6,对于PhotoZoom Classic 7还是有点陌生.其实在6代衍 ...

随机推荐

  1. Winform DevExpress控件库(三) 使用NavBarControl控件定制导航栏

    NavBarControl控件:主要作用是制作包含多个选项组并且每个组里包含多个子选项的导航栏: 位于 工具箱 -> Navigation & Layout(导航栏与布局类控件) 目录下 ...

  2. 激活第一个CPU

    回到start_kernel,559行,boot_cpu_init函数,跟start_kernel位于同一文件: 494static void __init boot_cpu_init(void) 4 ...

  3. 浅析"Sublabel-Accurate Relaxation of Nonconvex Energies" CVPR 2016 Best Paper Honorable Mention

    今天作了一个paper reading,感觉论文不错,马克一下~ CVPR 2016 Best Paper Honorable Mention "Sublabel-Accurate Rela ...

  4. 在一维坐标轴上有n个区间段,求重合区间最长的两个区间段。

    //重叠区间数 #define N 2 typedef struct arrange { int x; int y; } Arrange; //先按左边界排序,若相等再按右边界排序(升序) int c ...

  5. 递归的神奇之处在于你会发现问题竟然解决了--解N皇后谜题有感

    看sicp看到8皇后谜题, 突然兴致来了,尝试独立解决(scheme代码的好处在于,即使你瞟了眼答案, 也不会有任何收获, 除了知道那儿有一坨神秘的括号和英文字符外但Python代码就不同了),成功了 ...

  6. Dynamics CRM FORM脚本库加载本地脚本

    用传统的开发方式,js脚本都是保存在数据库中的,这样也方便迁移,但如果不想存数据库而是存在物理磁盘上,则可通过下述代码,将脚本存放在CRMWEB文件夹的某个路径下,每次都动态引用本地JS. funct ...

  7. Android开发学习之路--Drawable mutations

      时间过得很快,明天终于可以拿到房子了,交完这次房租,也可以成为房东了,看看博客也好久没有更新了,最近一直在整机器人,也没有太多时间整理博客.   今天下午和同事一起遇到了一个问题,就是明明没有改变 ...

  8. SQLite 创建数据库(http://www.w3cschool.cc/sqlite/sqlite-create-database.html)

    SQLite 创建数据库 SQLite 的 sqlite3 命令被用来创建新的 SQLite 数据库.您不需要任何特殊的权限即可创建一个数据. 语法 sqlite3 命令的基本语法如下: $sqlit ...

  9. 解决Setting property 'source' to 'org.eclipse.jst.jee.server的问题

    对于这个问题,我相信我的方法已经能帮90%的人解决了! 当你用Eclipse运行web项目的时候,你就会看到控制台出现: WARNING: [SetPropertiesRule]{Server/Ser ...

  10. Description Resource Path Location Type AndroidManifest.xml file missing!

    这个问题又找了好久.国内回答的确不敢恭维. 本回答来自谷歌:   This is build issue. Go to Menu in eclipse, Project>clean then P ...