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 中，我們在應用程式本身中宣告所有模型、檢視、控制器和儲存。