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

通过查看两个版本，您可以看到创建类的方式有所变化，现在受到 ExtJs 的启发，例如 −

• 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 中我们在应用程序本身中声明所有模型、视图、控制器和存储。