SenchaTouch-移行

Sencha Touchには、以前のバージョンからさまざまな修正が加えられています。

Sencha Touch 2には下位互換性ビルドが付属しており、バージョン1.xから2.xへの移行プロセスが容易になります。

このビルドは、移行の問題が発生した場合やコードの変更が必要な場合に警告とログを提供することで作業を簡単にするだけなので、ユーザーはアプリケーションが最新バージョンで動作することを確認するために、変更が必要な場所を知ることができます。

Sencha Touch 2.xの移行には、次のコード変更が必要です。

クラスシステム

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

Code in 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に変更されました。
これで、クラスに関連するすべての構成パラメーターが構成パラメーターの下で定義されます。
initComponentがinitialize（）メソッドに変更されました。
Sencha Touch 2.xでは、setHtml（）関数とgetHtml（）関数を使用して、htmlを更新したり、値を取得したりできます。

MVCアーキテクチャ

Sencha Touch 1.xコードはモジュール式で、MVCアーキテクチャに基づいていました。Sencha Touch 2.xは、モデル、ビュー、およびコントローラーを記述するための異なる構文に従います。異なるバージョンのモデル、ビュー、およびコントローラーファイルの違いを見てみましょう。

モデル

Code in Sencha Touch 1.x −

Ext.regModel('MyApp.model.StudentModel', {
   fields: [
      {name: 'name',  type: 'string'},
      {name: 'age',   type: 'int'}
   ]
});

Code in 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セクションに含まれるようになりました。

見る

Code in Sencha Touch 1.x −

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

Code in Sencha Touch 2.x −

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

ビューはほぼ同じですが、ビュー名がMyapp.view.StudentViewなどの2.xバージョンの名前空間に従い、コードがモデルのようにExt.defineメソッドで記述されていることだけが変更されています。

コントローラ

Code in Sencha Touch 1.x −

Ext.regController("studentController", {
   someMethod: function() {
      alert('Method is called');
   }
});

Code in 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を拡張します。

応用

Code in Sencha Touch 1.x −

Ext.application({
   name: 'MyApp',
   launch: function() {
      Ext.create('MyApp.view.StudentView');
   }
});

Code in 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では、すべてのモデル、ビュー、コントローラー、およびストアをアプリケーション自体で宣言することです。