Sencha Touch - migracja

Sencha Touch zawiera różne poprawki z wcześniejszej wersji.

Sencha Touch 2 jest dostarczany z kompilacją kompatybilności wstecznej, która ułatwia proces migracji z wersji 1.x do 2.x.

Ta kompilacja po prostu ułatwia pracę, zapewniając ostrzeżenie i dzienniki za każdym razem, gdy wystąpi problem z migracją lub wymagana jest zmiana kodu, dzięki czemu użytkownik dowie się, gdzie zmiany muszą być, aby upewnić się, że aplikacja działa z najnowszą wersją.

Migracja Sencha Touch 2.x wymaga następujących zmian w kodzie.

System klas

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

Patrząc na obie wersje, możesz zobaczyć, że sposób tworzenia klasy to zmiany, które są teraz inspirowane przez ExtJ, takie jak -

• Ext.extend zostaje zmieniony na Ext.define.

• Wszystkie parametry konfiguracyjne związane z klasą są teraz zdefiniowane w parametrze config.

• InitComponent zostaje zmieniony na metodę initialize ().

• W Sencha Touch 2.x możemy mieć funkcje setHtml () i getHtml () do aktualizacji html lub do pobierania wartości.

Architektura MVC

Kod Sencha Touch 1.x był modułowy i oparty na architekturze MVC. Sencha Touch 2.x ma inną składnię do pisania modelu, widoku i kontrolera. Zobaczmy różnice w plikach modelu, widoku i kontrolera w różnych wersjach.

Model

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 został zmieniony na Ext.define, który rozszerza Ext.data.Model.

Wszystkie pola znajdują się teraz w sekcji konfiguracji w wersji 2.x.

Widok

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

Widok jest prawie taki sam, jedyną zmianą jest to, że nazwa widoku następuje po przestrzeni nazw wersji 2.x, takiej jak Myapp.view.StudentView, a kod jest zapisywany w metodzie Ext.define jako podobny model.

Kontroler

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

Taki sam jak model w kontrolerze. Również Ext.regController został zmieniony na Ext.define, który rozszerza Ext.app.Controller.

Podanie

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

Główna różnica między wersją 1.xi 2.x polega na tym, że w wersji 2.x deklarujemy wszystkie modele, widoki, kontrolery i magazyny w samej aplikacji.