2014年8月8日星期五

【翻译】Ext JS 5.0.1 中的新功能

本邮件内容由第三方提供,如果您不想继续收到该邮件,可 点此退订
【翻译】Ext JS 5.0.1 中的新功能  阅读原文»

【翻译】Ext JS 5.0.1 中的新功能

原文: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',
name:'orderId',//IndicatesthatthereferencedModel(Order)ownsthese
reference:{parent:'Order'}

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

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

order.orderItems().removeAt(0);//removedorderItemisdropped
order.orderItems().getAt(0).setOrder(null);//alsodropsthisitem

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


新的responsiveConfig是由Ext.mixin.Responsive提供的,而Ext.plugin.Responsive提供的是一些针对管理动态条件清理的灵活性。

新的responsiveFormulas允许为responsiveConfig规则添加可用属性,例如,主控制器可以使用以下方式来发布新的属性:

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

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


"Sencha-charts"包也有几个改进,如可重用的标记(箭头、菱形等)。对于那些不使用Sencha Cmd的初学者来说,sencha-charts包已经包含在Ext JS 5.0.1的生成包中。最显著的改变是在文档中已经说明了如何去创?p>阅读更多内容

没有评论:

发表评论