Sencha-touch-migration-steps

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.data.Modelを拡張するExt.defineに変更されます。

2.xバージョンでは、すべてのフィールドがconfigセクションになりました。

View

• Sencha Touch 1.xのコード*-

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

• Sencha Touch 2.xのコード*-

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

ビューはほぼ同じで、ビュー名がMyapp.view.StudentViewなどの2.xバージョンの名前空間に従う唯一の変更点であり、コードはモデルのように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ではすべてのモデル、ビュー、コントローラー、ストアをアプリケーション自体で宣言することです。