Sencha Touch - Migração

O Sencha Touch vem com várias retificações da versão anterior.

O Sencha Touch 2 vem com o build de compatibilidade com versões anteriores, o que torna o processo de migração mais fácil da versão 1.x para 2.x.

Esta compilação apenas facilita o trabalho, fornecendo um aviso e os logs sempre que ocorrer qualquer problema de migração ou alteração de código for necessária, para que o usuário saiba onde estão as alterações necessárias para garantir que o aplicativo funcione com a versão mais recente.

A migração do Sencha Touch 2.x requer as seguintes alterações de código.

Sistema de classes

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

Olhando para ambas as versões, você pode ver que a maneira de criar classes é mudando que agora é inspirada por ExtJs como -

  • Ext.extend é alterado para Ext.define.

  • Todos os parâmetros de configuração relacionados à classe agora estão definidos no parâmetro config.

  • O initComponent é alterado para o método initialize ().

  • No Sencha Touch 2.x, podemos ter as funções setHtml () e getHtml () para atualizar o html ou obter o valor.

Arquitetura MVC

O código do Sencha Touch 1.x era modular e baseado na arquitetura MVC. O Sencha Touch 2.x segue uma sintaxe diferente para escrever modelo, visualização e controlador. Vamos ver a diferença dos arquivos de modelo, visualização e controlador em diferentes versões.

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 é alterado para Ext.define que estende Ext.data.Model.

Todos os campos vêm na seção de configuração agora na versão 2.x.

Visão

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

A visão é quase a mesma, a única mudança sendo o nome da visão segue o namespacing da versão 2.x, como Myapp.view.StudentView e o código é escrito no método Ext.define como o modelo.

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 ao modelo no controlador. Além disso, o Ext.regController é alterado para Ext.define, que estende Ext.app.Controller.

Inscrição

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

A principal diferença entre a versão 1.xe a versão 2.x é que na 2.x declaramos todos os modelos, visualizações, controladores e armazenamentos no próprio aplicativo.