Ext JS 5.0.1中的新功能

Posted 周五, 08/15/2014 - 11:46 by admin

今天，我们很高兴的宣布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); // 移除它
 
   order.orderItems().getAt(0).setOrder(null); // 也可以删除该项

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

    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
原文: http://www.sencha.com/blog/whats-new-in-ext-js-5-0-1

译者: 黄灯桥
译文: http://blog.csdn.net/tianxiaode/article/details/38435079

  • 要发表评论，请先登录