Sencha Touch - Migración

Sencha Touch viene con varias rectificaciones de la versión anterior.

Sencha Touch 2 viene con la compilación de compatibilidad con versiones anteriores, lo que facilita el proceso de migración de la versión 1.xa 2.x.

Esta compilación simplemente facilita el trabajo al proporcionar una advertencia y los registros cada vez que se produce un problema de migración o se requiere un cambio de código, de modo que el usuario sepa dónde se deben realizar los cambios, para asegurarse de que la aplicación funcione con la última versión.

La migración de Sencha Touch 2.x requiere los siguientes cambios de código.

Sistema de clases

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

Al observar ambas versiones, puede ver que la forma de crear clases son cambios que ahora están inspirados en ExtJ como:

• Ext.extend se cambia a Ext.define.

• Todos los parámetros de configuración relacionados con la clase ahora se definen en el parámetro de configuración.

• El initComponent se cambia al método initialize ().

• En Sencha Touch 2.x, podemos tener las funciones setHtml () y getHtml () para actualizar html o para obtener el valor.

Arquitectura MVC

El código Sencha Touch 1.x era modular y se basaba en la arquitectura MVC. Sencha Touch 2.x sigue una sintaxis diferente para escribir modelo, vista y controlador. Veamos la diferencia de archivos de modelo, vista y controlador en diferentes versiones.

Modelo

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 se cambia a Ext.define que extiende Ext.data.Model.

Todos los campos vienen bajo la sección de configuración ahora en la versión 2.x.

Ver

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 vista es casi la misma, el único cambio es que el nombre de la vista sigue el espacio de nombres de la versión 2.x, como Myapp.view.StudentView, y el código se escribe en el método Ext.define como modelo similar.

Controlador

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

Igual que el modelo en el controlador. Además, Ext.regController se cambia a Ext.define, que extiende Ext.app.Controller.

Solicitud

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 principal diferencia entre la versión 1.xy la versión 2.x es que en 2.x declaramos todos los modelos, vistas, controladores y tiendas en la propia aplicación.