[翻译]从Sencha Touch 1.* 升级到 Sencha Touch 2.*

参考文章

http://www.sencha.com/learn/upgrading-from-sencha-touch-1x-to-2x/

http://www.sencha.com/learn/upgrading-to-sencha-touch-2-pr2/

http://docs.sencha.com/touch/2-0/#!/video/migrating-from-1-to-2

类系统（Class System）

在ST1.×里面，有两种定义类的方式：

1、使用Ext.extend

2、使用MVC提供的方法：regModel 和 regController

在ST2.×中，全部定义类的方式都只有 Ext.define

下面，举个从1.×升级到2.×定义类方式的例子：

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');

        }

  

    }

});

在2.×中，我们要把上面的代码修改为：

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');

        }

    }

});

 

总结一下修改的地方：

1、使用Ext.define 代替了 Ext.extend

2、把所有的类配置信息都放到了一个叫config的对象字面量中。

3、使用initialize方法替换了initComponent

  在1.×中，只有Component类有initComponent方法，而在2.×中，所有的类都有initialize方法，在类实例化之前执行这个方法。

  这里还要注意的是，我们再也不需要显式地调用Geo.views.BillSummary.superclass.initComponent.call(this);，执行父类构造函数用 this.callParent(arguments) 

MVC

ST2.×的MVC架构基本上跟1.×是一样的，只是在一些语法上有细微差别，使到我们写出来的代码可读性和可测试性更强。

Models

Model类与ST2.×的其他类一样，config信息需要移到一个叫config的字面量中；Ext.regModel不再使用，而是用Ext.define去定义Models类。

例子：

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'));

    }

}); 

修改为：

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.define 替换 Ext.regModel
2. 继承 Ext.data.Model
3. 把配置移动到 config 块中
4. 把定制函数留在config块以外 (例如上面的 sayName ) 

VIEWS

views没什么需要迁移的地方，只需要注意：类名尽量采用这样的命名方式：MyApp.view.SomeViewName

Application

 你可以保留大部分定义 Ext.application的方式，例如：

Ext.application({

    name: 'MyApp',

  

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

  

    launch: function() {

        Ext.create('MyApp.view.Main');

    }

});

这里，唯一新的用法是使用 Ext.create 去初始化应用。

这样的改变意义是：在1.×中，一般的做法实在Ext.application中定义全部的controller，和部分的model、view、model，其余的依赖分散在系统的各个地方，这样使到我们很难直观地了解到整个系统的结构。

在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');

    }

});

Controllers

正如models和其他类一样，需要使用Ext.define替代Ext.regController 去定义Controller类。

例如：

Ext.regController("searches", {

    showSomething: function() {

        alert('something');

    }

});

在2.×，变成：

Ext.define('MyApp.controller.Searches', {

    extend: 'Ext.app.Controller',

  

    showSomething: function() {

        alert('something');

    }

});

在Applications中提到，如果Controller中有其他依赖的model, view 或者 store ，则要放到Application中定义。

Routes

 

在Sencha Touch 1.x中，一个Controller只是一堆可导向的方法的集合，但是在2.×中，Controller变得更主动，它可以定义自己的routes:

Ext.define('MyApp.controller.Searches', {

    config: {

        routes: {

            'search/:query': 'doSearch'

        }

    },

  

    doSearch: function(query) {

        alert('searching for ' + query);

    }

});

 

还有问题吗？

请到这里去看看有没有同样的问题吧，如果没有，发帖请教。

http://www.sencha.com/forum/forumdisplay.php?89-Sencha-Touch-2.x-Forums