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 เราจะประกาศโมเดลมุมมองคอนโทรลเลอร์และร้านค้าทั้งหมดในแอปพลิเคชันเอง