从 Sencha Touch 1.x 升级到 2.x

Sencha Touch 2 为框架带来了许多改进。由于其中一些更改需要您更新应用程序代码的部分内容，因此本指南将引导您完成需要进行的更改。

除了本指南外，Sencha Touch 2 还附带了一个向后兼容性构建，使迁移过程更加容易。请注意，此构建不能自动保证您的 1.x 应用程序开箱即用。在可能的情况下，兼容性构建会找出您的 1.x 应用程序代码尝试执行的操作，并将其路由到 2.x API。每当它这样做时，兼容性构建都会在控制台中记录警告，指示您需要更新的项目。

如果您按照以下步骤操作，然后更正兼容性层告知您的任何警告，您应该获得一个可以在 Sencha Touch 2.x 上运行的应用程序。

SenchaCon 2011：从 Touch 1.x 迁移到 2.0，来自 Sencha，发布在 Vimeo 上。

类系统

迁移应用程序时，最大的更改与类的定义方式有关。Sencha Touch 2 使用从 Ext JS 4 派生的升级类系统，该系统带来了强大的新功能，例如 mixins、动态加载和配置系统。

在 Sencha Touch 1.x 中，定义类主要有两种方式 - 使用 Ext.extend 和使用 MVC 特定的便捷函数之一，例如 regModel 和 regController。在 Sencha Touch 2 中，所有类都以相同的方式定义，使用 Ext.define 方法。让我们考虑以下 1.x 示例类，看看如何将其迁移到 2.x 框架

Geo.views.BillSummary = Ext.extend(Ext.Panel, {
    scroll: 'vertical',
    html: "Loading...",
    styleHtmlContent: true,
    initComponent: function() {
        this.tpl = Ext.XTemplate.from('billsummary');
        Geo.views.BillSummary.superclass.initComponent.call(this);
    },

    /**
     * Get the billSummary and update the contents of the panel.
     */
    getBill: function(bill) {
        Geo.CongressService.getBillSummary({
            bill: bill
        }, this.onBillSummaryResponse, this);
    },

    // private
    onBillSummaryResponse: function(billSummary) {
        if (Ext.isArray(billSummary.Paragraph)) {
            this.update(billSummary);
        } else {
            this.update('No Bill Summary Available');
        }

    }
});

在 Sencha Touch 2.x 中，之前的代码编写如下

Ext.define('Geo.view.BillSummary', {
    extend: 'Ext.Panel',

    config: {
        scroll: 'vertical',
        html: 'Loading...',
        styleHtmlContent: true
    },

    initialize: function() {
        this.callParent(arguments);

        this.tpl = Ext.Template.from('billsummary');
    },

    /**
     * Get the billSummary and update the contents of the panel.
     */
    getBill: function(bill) {
        Geo.CongressService.getBillSummary({
            bill: bill
        }, this.onBillSummaryResponse, this);
    },

    // private
    onBillSummaryResponse: function(billSummary) {
        if (Ext.isArray(billSummary.Paragraph)) {
            this.setHtml(billSummary);
        } else {
            this.setHtml('No Bill Summary Available');
        }
    }
});

首先要注意的是，我们已将 Ext.extend 替换为 Ext.define。所有旧的组成部分仍然存在，但我们已将它们重新排列以使用新语法。您可以注意到，在 2.x 版本中，所有类名都是基于字符串的。这使动态加载系统能够自动将这些类加载到页面上（如果它们尚未存在）。有关更多详细信息，请参阅 类系统指南。

另一个更改与将所有配置选项移动到 config 对象有关。每个类的配置选项都可以在类文档中找到。定义类时，在类的配置部分中找到的任何参数都应放入 config 对象中。

配置系统提供了一些关键优势，主要是 API 一致性的保证。例如，html 配置选项保证我们可以随时调用 getHtml 和 setHtml，从而消除了猜测要调用哪些函数的麻烦。每个配置选项都有 getter 和 setter 函数，它们遵循与 getHtml 和 setHtml 相同的模式。我们在 onBillSummaryResponse 函数中利用了这一点，我们将旧的“update”函数替换为更清晰的 setHtml 函数。

最后，我们将 initComponent 替换为 initialize。在框架的 1.x 版本中，initComponent 仅在 Component 类上可用，这排除了所有其他类，例如 Models、Controllers 和实用程序。在 2.x 版本中，每个类都有一个 initialize 函数，如果您希望在实例化时执行某些逻辑，则可以实现该函数。这里需要注意的另一个细节是，您不再需要冗长的 Geo.views.BillSummary.superclass.initComponent.call(this); 调用 - 您可以始终使用 this.callParent(arguments) 来调用超类函数。

MVC 迁移

Sencha Touch 2 中的 MVC 架构是对 Sencha Touch 1 中采用的方法的改进。虽然大多数概念相同，但语法已得到改进，以使 API 更具表现力，并使您的代码更具可读性和可测试性。

模型

与 Sencha Touch 2 中的所有其他类类似，模型类和其余数据包现在期望将其配置放入 config 块中。Sencha Touch 2 还统一了定义应用程序所有类的方式：不再需要 Ext.regModel - 相反，模型就像任何其他类一样被 定义。迁移模型非常简单 - 考虑到您曾经有一个模型，如以下代码示例所示

Ext.regModel('MyApp.model.User', {
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int'},
        {name: 'alive', type: 'boolean', defaultValue: true}
    ],

    validations: [
        {type: 'presence', field: 'age'},
        {type: 'length',   field: 'name', min: 2}
    ],

    sayName: function() {
        alert(this.get('name'));
    }
});

在 Sencha Touch 2 中，相同的模型如下所示

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {name: 'name',  type: 'string'},
            {name: 'age',   type: 'int'},
            {name: 'alive', type: 'boolean', defaultValue: true}
        ],

        validations: [
            {type: 'presence', field: 'age'},
            {type: 'length',   field: 'name', min: 2}
        ]
    },

    sayName: function() {
        alert(this.get('name'));
    }
});

模型迁移通常分四个步骤完成

1. 将 Ext.regModel 替换为 Ext.define
2. 通过扩展 Ext.data.Model 创建一个新的模型类
3. 将模型的所有配置移动到其 config 块中
4. 将任何自定义函数（例如，上一个代码中的 sayName）保留在 config 块之外

视图

除了迁移到新的类系统语法外，视图迁移非常简单。要记住的主要点是关于视图类名称的约定。在 Sencha Touch 2 及更高版本中，我们建议您的视图类名称遵循模式 MyApp.view.SomeViewName。请注意，“view”是单数，这使类系统能够自动从文件 app/view/SomeViewName.js 加载视图类。

应用程序

对于 Ext.application 定义，您可以保留 1.x 应用程序中的大多数语法

Ext.application({
    name: 'MyApp',

    icon: 'resources/images/logo.png',

    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

唯一的更改是我们使用 Ext.create 来实例化 MyApp.view.Main，这是我们应用程序的主屏幕。

除了此更改之外，在加载应用程序需要的模型、视图、控制器和存储方面，还有另一个细微的更改。在 1.x 中，通常在 Ext.application 块内定义所有控制器，以及一些模型、视图和存储。其余依赖项可能分散在您的应用程序中，使得难以轻松了解应用程序的确切组成。

在 Sencha Touch 2 中，我们鼓励您在 Ext.application 块内定义应用程序的所有依赖项，而不是将其中一些依赖项放在控制器内。一个示例可能如下所示

Ext.application({
    name: 'MyApp',

    icon: 'resources/images/logo.png',

    models: ['User', 'Group'],
    controllers: ['Users', 'Login'],
    views: ['Main', 'Users'],
    stores: ['Users'],

    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

控制器

与模型类似，Sencha Touch 2 期望任何控制器都像任何其他类一样定义，因此 Ext.regController 函数已弃用。在 1.x 版本中，我们可能有一个控制器，如下所示

Ext.regController("searches", {
    showSomething: function() {
        alert('something');
    }
});

在 2.x 版本中，它变为以下示例代码中所示

Ext.define('MyApp.controller.Searches', {
    extend: 'Ext.app.Controller',

    showSomething: function() {
        alert('something');
    }
});

如前所述，如果您的 1.x 控制器定义了其他模型、视图或存储依赖项，则应将这些依赖项移动到应用程序中。兼容性构建仍将尝试加载这些依赖项，但非兼容性构建不会。

路由

在 Sencha Touch 1.x 中，控制器在很大程度上是可以外部调度的函数集合。通常，这意味着应用程序将调用 Ext.dispatch，指定控制器名称、要调用的函数以及要传递给函数的参数。有时，调度将是自动的，由路由器拾取的 URL 更改触发。

在 2.x 中，控制器变得更加主动，在其 config 块内主动注册它关心的路由

Ext.define('MyApp.controller.Searches', {
    config: {
        routes: {
            'search/:query': 'doSearch'
        }
    },

    doSearch: function(query) {
        alert('searching for ' + query);
    }
});

这绕过了对单独路由文件的需求，并允许控制器指示，只要页面 URL 与“search/:query”匹配，就会使用查询调用 doSearch 函数。例如，如果页面 URL 当前为 http://myapp.com/#searches/abc123，则将使用“abc123”调用 doSearch。如果页面 URL 稍后变为“#searches/sencha”，则再次使用“sencha”调用 doSearch。

新功能

在 Sencha Touch 2 中，控制器获得了新功能，其中最强大的是 refs 和 control。有关更多信息，请参阅 控制器指南。

更多帮助

一旦您迁移了所有内容并更新了所有代码，以便不再有控制台警告，您的应用程序应该在很大程度上可以正常工作。对于任何特定问题，获得帮助的最佳场所是 Sencha Touch 2 论坛。