Sencha Touch - Migration

Sencha Touch est livré avec diverses rectifications de la version précédente.

Sencha Touch 2 est livré avec la version de compatibilité descendante, ce qui facilite le processus de migration de la version 1.x à 2.x.

Cette version facilite simplement le travail en fournissant un avertissement et les journaux chaque fois qu'un problème de migration se produit ou qu'une modification de code est nécessaire, afin que l'utilisateur sache où les modifications doivent être apportées, pour s'assurer que l'application fonctionne avec la dernière version.

La migration Sencha Touch 2.x nécessite les modifications de code suivantes.

Système de classe

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

En regardant les deux versions, vous pouvez voir comment créer une classe est des changements qui sont maintenant inspirés par ExtJs tels que -

• Ext.extend est remplacé par Ext.define.

• Tous les paramètres de configuration liés à la classe sont maintenant définis sous le paramètre config.

• L'initComponent est remplacé par la méthode initialize ().

• Dans Sencha Touch 2.x, nous pouvons avoir des fonctions setHtml () et getHtml () pour mettre à jour html ou pour obtenir la valeur.

Architecture MVC

Le code Sencha Touch 1.x était modulaire et basé sur l'architecture MVC. Sencha Touch 2.x suit une syntaxe différente pour l'écriture du modèle, de la vue et du contrôleur. Voyons la différence entre les fichiers de modèle, de vue et de contrôleur dans différentes versions.

Modèle

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 est changé en Ext.define qui étend Ext.data.Model.

Tous les champs sont maintenant dans la section config en version 2.x.

Vue

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: [{}]
});

La vue est presque la même, le seul changement étant que le nom de la vue suit l'espace de noms de la version 2.x tel que Myapp.view.StudentView et le code est écrit dans la méthode Ext.define comme modèle.

Manette

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

Identique au modèle du contrôleur. De plus, Ext.regController est changé en Ext.define, qui étend Ext.app.Controller.

Application

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

La principale différence entre la version 1.x et la version 2.x est que, dans la version 2.x, nous déclarons tous les modèles, vues, contrôleurs et magasins dans l'application elle-même.