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

你可能感兴趣的:(sencha,touch)