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 版本中，所有字段都位于 config 部分。

视图

Sencha Touch 1.x 中的代码 −

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

Sencha Touch 2.x 中的代码 −

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

视图几乎相同，唯一的变化是视图名称遵循 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 中，我们在应用程序本身中声明所有模型、视图、控制器和存储。

打印页面