Sencha Touch - 迁移

---

Sencha Touch 对早期版本进行了多项修正。

Sencha Touch 2 具有向后兼容性构建，这使得从版本 1.x 到 2.x 的迁移过程变得更加容易。

此构建只是通过在发生任何迁移问题或需要更改代码时提供警告和日志来使工作变得更轻松，因此用户将了解必须进行哪些更改，以确保应用程序适用于最新版本。

Sencha Touch 2.x 迁移需要以下代码更改。

类系统

Sencha Touch 1.x 中的代码-

MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
   scroll: 'vertical',
   html: 'Student Panel'
   initComponent: function() {
      Ext.getCmp('StudentIdDiv').update('This is a Student panel');
   }
});

Sencha Touch 2.x 中的代码-

Ext.define('MyApp.view.StudentPanel', {
   extend: 'Ext.Panel',

   config: {
      scroll: 'vertical',
      html: 'Student Panel'
   },

   initialize: function() {
      Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
   }
});

通过查看这两个版本，您可以看到创建类的方式发生了变化，现在受到 ExtJ 的启发，例如：

• Ext.extend 更改为 Ext.define。

• 所有与该类相关的配置参数现在都在 config 参数下定义。

• initComponent 更改为initialize() 方法。

• 在 Sencha Touch 2.x 中，我们可以使用 setHtml() 和 getHtml() 函数来更新 html 或获取值。

MVC架构

Sencha Touch 1.x 代码是模块化的并且基于 MVC 架构。Sencha Touch 2.x 遵循不同的语法来编写模型、视图和控制器。我们来看看不同版本中模型、视图、控制器文件的区别。

模型

Sencha Touch 1.x 中的代码-

Ext.regModel('MyApp.model.StudentModel', {
   fields: [
      {name: 'name',  type: 'string'},
      {name: 'age',   type: 'int'}
   ]
});

Sencha Touch 2.x 中的代码-

Ext.define('MyApp.model.StudentModel', {
   extend: 'Ext.data.Model', config: {
      fields: [
         {name: 'name',  type: 'string'},
         {name: 'age',   type: 'int'}
      ]
   }
});

Ext.regModel 更改为 Ext.define，它扩展了 Ext.data.Model。

现在 2.x 版本中所有字段都位于配置部分下。

看法

Sencha Touch 1.x 中的代码-

Ext.Panel("studentView", {
   items: [{}]
});

Sencha Touch 2.x 中的代码-

Ext.define('MyApp.view.StudentView', {
   extend: 'Ext.tab.Panel',
   items: [{}]
});  

View 几乎相同，唯一的变化是视图名称遵循 2.x 版本命名空间，例如 Myapp.view.StudentView，并且代码像模型一样在 Ext.define 方法中编写。

控制器

Sencha Touch 1.x 中的代码-

Ext.regController("studentController", {
   someMethod: function() {
      alert('Method is called');
   }
});

Sencha Touch 2.x 中的代码-

Ext.define('MyApp.controller.studentController', {
   extend: 'Ext.app.Controller', someMethod: function() {
      alert('Method is called');
   }
});

与控制器中的型号相同。此外，Ext.regController 更改为 Ext.define，它扩展了 Ext.app.Controller。

应用

Sencha Touch 1.x 中的代码-

Ext.application({
   name: 'MyApp',
   launch: function() {
      Ext.create('MyApp.view.StudentView');
   }
});

Sencha Touch 2.x 中的代码-

Ext.application({
   name: 'MyApp',
   models: ['studentModel'],
   controllers: ['studentController'],
   views: ['studentView'],
   stores: ['studentStore'],

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

版本 1.x 和版本 2.x 之间的主要区别是，在 2.x 中，我们在应用程序本身中声明所有模型、视图、控制器和存储。