Sencha Touch - การโยกย้าย

Sencha Touch มาพร้อมกับการแก้ไขที่หลากหลายจากรุ่นก่อนหน้า

Sencha Touch 2 มาพร้อมกับโครงสร้างความเข้ากันได้แบบย้อนหลังซึ่งทำให้กระบวนการย้ายข้อมูลง่ายขึ้นจากเวอร์ชัน 1.x เป็น 2.x

โครงสร้างนี้ช่วยให้การทำงานง่ายขึ้นโดยการแจ้งเตือนและบันทึกเมื่อใดก็ตามที่เกิดปัญหาการย้ายข้อมูลหรือจำเป็นต้องมีการเปลี่ยนแปลงรหัสดังนั้นผู้ใช้จะได้รับทราบว่าต้องมีการเปลี่ยนแปลงที่ใดเพื่อให้แน่ใจว่าแอปพลิเคชันทำงานร่วมกับเวอร์ชันล่าสุด

การโยกย้าย Sencha Touch 2.x ต้องการการเปลี่ยนแปลงรหัสต่อไปนี้

ระบบคลาส

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

เมื่อดูทั้งสองเวอร์ชันคุณจะเห็นวิธีการสร้างคลาสคือการเปลี่ยนแปลงซึ่งตอนนี้ได้รับแรงบันดาลใจจาก ExtJ เช่น -

  • Ext.extend เปลี่ยนเป็น Ext.define

  • ตอนนี้พารามิเตอร์คอนฟิกูเรชันทั้งหมดที่เกี่ยวข้องกับคลาสถูกกำหนดภายใต้พารามิเตอร์ config

  • initComponent เปลี่ยนเป็นวิธี initialize ()

  • ใน Sencha Touch 2.x เราสามารถมีฟังก์ชัน setHtml () และ getHtml () เพื่ออัปเดต html หรือเพื่อรับค่า

สถาปัตยกรรม MVC

รหัส Sencha Touch 1.x เป็นแบบแยกส่วนและใช้สถาปัตยกรรม MVC Sencha Touch 2.x เป็นไปตามไวยากรณ์ที่แตกต่างกันสำหรับการเขียนโมเดลมุมมองและตัวควบคุม มาดูความแตกต่างของไฟล์โมเดลมุมมองและคอนโทรลเลอร์ในเวอร์ชันต่างๆ

รุ่น

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 เปลี่ยนเป็น Ext.define ซึ่งขยาย Ext.data.Model

ฟิลด์ทั้งหมดอยู่ในส่วน config ในเวอร์ชัน 2.x

ดู

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

มุมมองเกือบจะเหมือนกันการเปลี่ยนแปลงเพียงอย่างเดียวคือชื่อมุมมองตามการกำหนดเนมสเปซเวอร์ชัน 2.x เช่น Myapp.view.StudentView และโค้ดกำลังเขียนในวิธี Ext.define เหมือนกับโมเดล

ตัวควบคุม

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

เหมือนกับรุ่นในคอนโทรลเลอร์ นอกจากนี้ Ext.regController ยังเปลี่ยนเป็น Ext.define ซึ่งขยาย Ext.app.Controller

ใบสมัคร

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

ความแตกต่างที่สำคัญระหว่างเวอร์ชัน 1.x และเวอร์ชัน 2.x คือใน 2.x เราจะประกาศโมเดลมุมมองคอนโทรลเลอร์และร้านค้าทั้งหมดในแอปพลิเคชันเอง