Sencha Touch - Migrasi

Sencha Touch hadir dengan berbagai perbaikan dari versi sebelumnya.

Sencha Touch 2 hadir dengan versi kompatibilitas mundur, yang membuat proses migrasi lebih mudah dari versi 1.x ke 2.x.

Build ini membuat pekerjaan lebih mudah dengan memberikan peringatan dan log setiap kali terjadi masalah migrasi atau perubahan kode diperlukan, sehingga pengguna akan mengetahui di mana perubahan harus dilakukan, untuk memastikan aplikasi berfungsi dengan versi terbaru.

Migrasi Sencha Touch 2.x memerlukan perubahan kode berikut.

Sistem kelas

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

Dengan melihat kedua versi tersebut, Anda dapat melihat cara membuat kelas adalah perubahan yang sekarang terinspirasi oleh ExtJs seperti -

• Ext.extend diubah menjadi Ext.define.

• Semua parameter konfigurasi yang terkait dengan kelas sekarang ditentukan di parameter config.

• InitComponent diubah menjadi metode inisialisasi ().

• Di Sencha Touch 2.x, kita dapat memiliki fungsi setHtml () dan getHtml () untuk memperbarui html atau untuk mendapatkan nilainya.

Arsitektur MVC

Kode Sencha Touch 1.x bersifat modular dan didasarkan pada arsitektur MVC. Sencha Touch 2.x mengikuti sintaks yang berbeda untuk model penulisan, tampilan, dan pengontrol. Mari kita lihat perbedaan file model, view, dan controller dalam berbagai versi.

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 diubah menjadi Ext.define yang memperluas Ext.data.Model.

Semua bidang berada di bawah bagian config sekarang dalam versi 2.x.

Melihat

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

Tampilannya hampir sama, satu-satunya perubahan adalah nama tampilan mengikuti namespacing versi 2.x seperti Myapp.view.StudentView dan kode menulis dalam metode Ext.define sebagai model seperti.

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

Sama seperti model dalam pengontrol. Juga Ext.regController diubah menjadi Ext.define, yang memperluas Ext.app.Controller.

Aplikasi

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

Perbedaan utama antara versi 1.x dan versi 2.x adalah, di 2.x kami mendeklarasikan semua model, tampilan, pengontrol, dan penyimpanan dalam aplikasi itu sendiri.