Sencha Touch-迁移 - 芒果文档

📌 相关文章

📜 Sencha Touch-迁移

📅 最后修改于: 2020-10-19 03:02:34 🧑 作者: Mango

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