Extjs5.0新特性

http://docs.sencha.com/ext/5.0.0/whats_new/5.0/whats_new.html

用google简单翻译了 不是专业人士，不喜勿喷。

   我们很高兴，Ext JS的5公共测试版。 Ext JS的5引入了许多新的和令人兴奋的改善Sencha框架。这些变化带来了新的功能性，可用性和风格。同时加入所有的新功能，你将要看到的，我们一直在努力，尽量减少变化，将让您升级到Ext JS的5困难。当突破进行了更改，我们还增加了诊断信息，如果可能的话，解释什么变化，哪些是你应该做到及时更新您的应用程序。有关这些更改的详细信息，请参阅Ext JS的5 - 升级指南。 

访问Ext JS的5例子页面和Ext JS的5页的文档进行更深层次的样子。 

现在，让我们来看看一些新增加的！

平板支持与新主题

其中最令人兴奋的加法对Ext JS的5功能集是与触摸屏输入设备，包括平板电脑和触摸屏笔记本电脑的支持。此功能可以让你得到你的Ext JS的应用和对触摸屏设备以最小的修改正在运行。这意味着，你可以花更少的时间来考虑兼容性问题，更多的时间实现强大的功能。

Ext JS的5欢迎增加了两个新的主题：Neptune Touch and Crisp。

Neptune Touch主题作为现代和简约的外观Neptune和感觉，适应它的触摸为中心的环境中使用。这是通过增加一些tappable元件的尺寸，以使更多的主题触摸友好实现。

清脆的主题需要Neptune Touch和修改默认的颜色，图标等，同时保持相同的触摸友好的尺寸。既Crisp和Neptune的触摸给你一个很好的起点，创建自己的自定义主题。当从这些主题进行构建，可以轻松地自定义大小和间距，颜色，字体，图标，边框等

新的应用架构 - 欢迎MVVM

Ext JS的4引入了MVC架构模式的支持。用Ext JS的5 ，我们添加了流行的替代MVC的支持： MVVM （代表模型 - 视图 - 视图模型） 。其中一个大景点，以MVVM是数据绑定。使用数据绑定，你再也不用写所有的“胶水”代码模型层连接到视图和更新模型时，视图被修改。

数据绑定

组件有一个新的“绑定”的配置，使他们能够连接到任何他们的其他的configs的（只要他们有一个setter方法） ，从Ext.app.ViewModel数据（见下文） 。使用绑定，你可以肯定的是相应的组件配置将其setter方法调用时绑定的值的变化。没有自定义事件处理程序需要的。

绑定配置还允许双向数据绑定，转化为生活的视图和模型之间的数据同步。在视图中所做的任何数据变更会自动回拨，自动更新可绑定到同一个数据的任何其他组件

视图控制器

在Ext JS的4 ，控制器提供了一个全局的解决方案，允许您应用逻辑应用程序范围内。 Ext JS的5为您提供可直接与视图实例相关联的视图专用控制器。从实例到灭亡， Ext.app.ViewController是绑到引用它的组件。同一视图类的第二个实例将获得自己的ViewController实例。

同时与Ext JS的4 MVC架构创建的全局控制器照常工作，创造ViewControllers往往是一个更好的选择。特别是，他们简化了事件和组件引用的接线，让你少担心像状态管理，防止内存泄漏的详细信息，并且可以专注于你的应用程序。

参考文献和监听

其中一个的ViewController最大的优点是它能够帮助大型应用程序连接组件，甚至当这些组件可能是由容器几层分开事件。例如，一个视图可以有嵌套在各种容器内的许多项目，像这样：

1

2

3

4

5

6

7

8

9

10

11

12

13

...

items: [{

    xtype: 'textfield',

    reference: 'someField' // this is new

}],

...

items: [{

    xtype: 'button',

    text: 'Delete,

    listeners: {

        click: 'onClickDelete' // also new (no "scope" here)

    }

}]

    用的ViewController，处理click事件，同时访问的文本字段不能再简单了::

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Ext.define('App.view.foo.FooController', {

    extend: 'Ext.app.ViewController',

 

    onClickDelete: function (deleteButton) {

        var someField = this.getReference('someField');

 

        Ext.Msg.confirm('Confirm Delete',

            'Are you sure you want to delete ' + someField.getValue(),

            'onConfirm', this);

    },

 

    onConfirm: function (choice) {

        // process 'yes' or 'no' answer

    }

});

相比于从Ext JS的4 的listeners and refs的构件查询的风格，在新的Ext.app.ViewController流线型的形式，使连接更加明显。这也使得它们更加安全，因为这些联系都封装在的ViewController。也就是说，一个嵌套视图内另一种观点认为，在两种观点的听众和引用都相互隔离，只能连接到各自的ViewControllers时。

ViewModels 

Ext.app.ViewModel是管理一个数据对象，并允许那些有兴趣在这个数据绑定到它，每当它改变通知的类。视图模型，像的ViewController被引用它的视图拥有。因为的ViewModels与视图相关联，他们也能够链接到在组件层次结构的祖先所拥有的组件父视图模型。这让孩子的意见，以继承其父视图模型的数据。 

作为一个类，视图模型往往延长。因为视图模型的主要作用是提供数据视图，也有在派生视图模型，可以大大简化这一任务提供两个功能：“formulas”和“stores”。派生类也可以添加其他有用的方法来封装他们的数据操作，但“formulas”和“stores”是唯一的的ViewModels。

Formulas        

除了保存数据，并提供绑定，Ext.app.ViewModel还提供了一个方便的方法来计算所谓的“Formulas”以外的数据。 Ext.app.ViewModel-CFG-公式让你封装的数据依赖于视图模型，并保持你的意见将精力集中于声明其结构。这类似于如何转换配置适用于传统的数据模型领域。

stores

一个ViewModel也可以定义哪个，然后提出自己的view作为命名对象，以使他们能够结合bind。正如Formulas，这使得views仍可自由声明其结构，而不是变得混乱复杂的stores定义，并在同一时间确保他们有自己的stores实例。

Example

可能是这样的

1

2

3

4

5

xtype: 'grid',

bind: {

    title: 'Summary for {fullName}',

    store: '{summary}'

}

而数据模型（ViewModel）可能是这样的

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Ext.define('App.view.summary.SummaryModel', {

    extend: 'Ext.app.ViewModel',

 

    formulas: {

        fullName: function (data) {

            return data.firstName + ' ' + data.lastName;

        }

    },

 

    stores: {

        summary: {

            source: 'allSummaries', // chains to a global store

            filters: [{

                property: 'fullName',

                value: '{fullName}'

            }]

        }

    }

});







上面的例子也显示了如何stores可以“链接”到其他store和应用自己的过滤器（也分类器）。阅读关于对连锁店的更多细节，但你可以看到有更多的事情在这里。这是因为viewmodel去一个额外的步骤和处理存储的configs为绑定，这意味着他们为动态值，如上面的过滤器反应。

Bringing It Together

与ExtJS的5，你可以使用ViewControllers来简化你的看法连接改善现有的MVC架构。

您还可以使用的ViewModels来自动化你视图和你的数据之间的连接，以及提供方法来操作数据（有时称为MVVM的“命令”）

最后，因为Ext JS的5支持两种范例，你可以使用它们在一起。

这可以是非常有用的在保持清晰的关注点分离，特别是当事件触发被创建或新的观点，出现路由操作等活动的，将使无论是view或viewModel关注的事情，他们宁肯忽略。

Routing

我们还实施了布线的Ext JS5，它允许您在应用程序中实现“深层链接”。这是通过翻译您的应用程序的URL到控制器动作和方法来实现。

对于那些不熟悉的煎茶触摸布线，它可以让你连接到你的应用程序的特定状态。 Ext JS的应用程序，甚至，可以更复杂，所以Ext JS的路由器支持一个单个URI多个连线。每条路线的处理，是从别人沙箱，允许更灵活的应用控制。

路线的执行可以使用“之前”功能进行控制。此功能将触发实际的路由发生之前，所以行动之前，可能会出现适当的验证。这使您可以停止当前的路径，其他的排队途径，或继续执行路线的一些动作后，如Ajax请求返回。

有关布线的更多信息，请查看我们的Routing Guide。

Data Package Improvements

Common Data

一位来自谁构建桌面和移动应用的用户最常见的要求是Ext JS的和Sencha 触摸来合并它们各自的数据包。我们已经通过移动Ext.data到新的SenchaCore包（见下文）做到了这一点与Ext JS的5。在本次合并，我们还增加了一些令人兴奋的改进给你两全其美。

Models

典型的应用有许多类型的模型，并可以很容易需要创建许多成千上万的记录。在Ext JS的5，我们简化记录创建和标识符生成的机制，以确保创建从原始数据对象的记录是尽可能便宜。 

该模型的构造函数不再从数据对象它被赋予提取领域，而是采用了它，它基于您定义的字段转换器和默认值升级。这意味着，你不再需要定义你想保持你的记录的每个字段。只要服务器发送所需格式数据时，这些属性将保持该记录的数据对象上。这些未申报领域被认为是持久的，因此更改都将被跟踪，并包含在保存回服务器。

Associations

Simplified Annotation

Ext JS 5，加入“参考”配置的字段定义简化申报关联的过程。参考配置使得它平凡的显示声明一对多和一对一的关联。

示例

1

2

3

4

5

Ext.define('App.model.Comment', {

    fields: [

        { name: 'userId', reference: 'User' }

    ]

});

所有的各种选项关联现在可以给出的参考配置选项。通过持有该链接值field的参考，但是，你不必再分别指定此连接。此外，您不再需要声明该关联的两个“边”，如被要求与“belongsTo的”和“的hasMany”。

Many to Many Associations

Ext JS5还增加了对Ext.data.schema.ManyToMany支持。一个典型的多到多的场景将与用户和组的论坛。一个用户可以属于多个组。和组有很多用户。声明一个多一对多关联可以在类的一个或两个来完成：

1

2

3

4

5

6

7

8

9

Ext.define('App.model.User', {

    extend: 'Ext.data.Model',

 

    fields: [{

        ...

    }],

 

    manyToMany: 'Group'

});

与其他关联，这是由一个store表示。是什么让许多到许多特殊的是，Ext JS 5保持对称。例如，当您为G组的记录添加到用户A的“users”的store，为用户A的记录添加到G组的“users”的store（和反向移除）。

Chained Stores

在Ext JS 5的，store有两个非常重要的，有时相互冲突的目的。第一种情况，他们充当从服务器接收信息的客户端的“记录系统”的数据层中。二是在这些信息通过组件，如grid和DataView的演示文稿。在以前的版本中所面临的挑战是如何准确管理是需要由多个组件，一个商店，因为这些组件可能要应用排序或过滤，它是呈现这将影响随后的共享存储中所有组件的数据。

随着连锁店的Ext JS的5 ，你现在可以自动完成这一同步。 A链结的store是“资源”store，它定义的一组记录一个store。那么Chained Stores可将其过滤，sorters or grouper定义自己的从源存储的记录顺序。由于记录的添加，删除或修改的资源store，Chained Stores和相关视图做出相应的反应。

建立Chained Stores是由ViewModel的进一步自动化，但他们可以直接轻松创建。因为链式存储重用源店的记录，你节省内存以及服务器调用。

Data Sessions

当保存记录，你必须小心留意在你要求这些对象来保存自己的秩序的Ext JS 4的服务器。您还必须确保调用保存所有的记录和存储你修改了。所有这一切的保存方式都会大大增加失败的可能。

用Ext JS的5现在有一个类来管理所有这些活动：Ext.data.Session。会话跟踪需要进行更新，创建或删除服务器上的记录。它也可以定制这些操作，以确保新创建的记录是最新的，服务器分配的ID正确引用其他新创建的记录。

session通过确保这是否是一个特定ID的所有引用的store类映射到相同的记录。这涉及到的store/ ID的所有关联存储共享相同的记录实例。这将确保该记录所做的编辑是在同一个地方。不像ModelCache在Sencha Touch，但是，Ext.data.Session是一个类，你可以创建。这意味着你可以，例如，创建一个模态窗口，从页面的其余部分隔离开一个新的会话。