[翻译]从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