Учебники

Сенча Touch — Миграция

Декабрь 18, 2018

Sencha Touch поставляется с различными исправлениями из более ранней версии.

Sencha Touch 2 поставляется с сборкой с обратной совместимостью, которая упрощает процесс перехода с версии 1.x на 2.x.

Эта сборка просто облегчает работу, предоставляя предупреждение и журналы всякий раз, когда возникает проблема миграции или требуется изменение кода, чтобы пользователь знал, где должны быть изменения, чтобы убедиться, что приложение работает с последней версией.

Для миграции Sencha Touch 2.x необходимы следующие изменения кода.

Система классов

Код в 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');
   }
});

Код в 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')
   }
});

Взглянув на обе версии, вы можете увидеть, как создать класс — это изменения, которые теперь вдохновлены такими ExtJs, как —

  • Ext.extend изменен на Ext.define.

  • Все параметры конфигурации, связанные с классом, теперь определены в параметре config.

  • InitComponent изменяется на метод initialize ().

  • В Sencha Touch 2.x у нас могут быть функции setHtml () и getHtml () для обновления html или получения значения.

Ext.extend изменен на Ext.define.

Все параметры конфигурации, связанные с классом, теперь определены в параметре config.

InitComponent изменяется на метод initialize ().

В Sencha Touch 2.x у нас могут быть функции setHtml () и getHtml () для обновления html или получения значения.

Архитектура MVC

Код Sencha Touch 1.x был модульным и основан на архитектуре MVC. Sencha Touch 2.x использует другой синтаксис для написания модели, вида и контроллера. Давайте посмотрим на разницу между файлами моделей, представлений и контроллеров в разных версиях.

модель

Код в Sencha Touch 1.x — 

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

Код в 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.define, который расширяет Ext.data.Model.

Все поля теперь находятся в разделе конфигурации в версии 2.x.

Посмотреть

Код в Sencha Touch 1.x — 

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

Код в Sencha Touch 2.x — 

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

Представление почти такое же, единственным изменением является то, что имя представления следует за пространством имен версии 2.x, таким как Myapp.view.StudentView, а код записывается в методе Ext.define как модель.

контроллер

Код в Sencha Touch 1.x — 

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

Код в 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.

заявка

Код в Sencha Touch 1.x — 

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

Код в 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 мы объявляем все модели, представления, контроллеры и хранилища в самом приложении.

45
Share: