Sencha Touch - Di chuyển

Sencha Touch đi kèm với các cải tiến khác nhau từ phiên bản trước đó.

Sencha Touch 2 đi kèm với bản dựng tương thích ngược, giúp quá trình di chuyển dễ dàng hơn từ phiên bản 1.x sang 2.x.

Bản dựng này chỉ giúp công việc trở nên dễ dàng hơn bằng cách cung cấp cảnh báo và nhật ký bất cứ khi nào xảy ra bất kỳ sự cố di chuyển nào hoặc yêu cầu thay đổi mã, vì vậy người dùng sẽ biết được vị trí cần thay đổi, để đảm bảo ứng dụng hoạt động với phiên bản mới nhất.

Di chuyển Sencha Touch 2.x yêu cầu các thay đổi mã sau.

Hệ thống lớp học

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

Bằng cách xem xét cả hai phiên bản, bạn có thể thấy cách tạo lớp là những thay đổi hiện được lấy cảm hứng từ ExtJs chẳng hạn như:

Ext.extend được đổi thành Ext.define.
Tất cả các tham số cấu hình liên quan đến lớp bây giờ được xác định trong tham số cấu hình.
InitComponent được thay đổi thành phương thức khởi tạo ().
Trong Sencha Touch 2.x, chúng ta có thể có các hàm setHtml () và getHtml () để cập nhật html hoặc để lấy giá trị.

Kiến trúc MVC

Mã Sencha Touch 1.x là mã mô-đun và dựa trên kiến trúc MVC. Sencha Touch 2.x tuân theo một cú pháp khác để viết mô hình, chế độ xem và bộ điều khiển. Hãy xem sự khác biệt của các tệp mô hình, chế độ xem và bộ điều khiển trong các phiên bản khác nhau.

Mô hình

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 được đổi thành Ext.define mở rộng Ext.data.Model.

Tất cả các trường hiện có trong phần cấu hình trong phiên bản 2.x.

Lượt xem

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

Chế độ xem gần như giống nhau, thay đổi duy nhất là tên chế độ xem tuân theo không gian tên phiên bản 2.x chẳng hạn như Myapp.view.StudentView và mã được viết bằng phương thức Ext.define như mô hình tương tự.

Bộ điều khiển

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

Giống như mô hình trong bộ điều khiển. Ngoài ra, Ext.regController được thay đổi thành Ext.define, mở rộng Ext.app.Controller.

Ứng dụng

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

Sự khác biệt chính giữa phiên bản 1.x và phiên bản 2.x là, trong 2.x, chúng tôi khai báo tất cả mô hình, khung nhìn, bộ điều khiển và cửa hàng trong chính ứng dụng.