Sencha Touch - Hỗ trợ Lịch sử

Sencha Touch đi kèm với hỗ trợ lịch sử đầy đủ và các tiện ích liên kết sâu.

Nó có chức năng nút quay lại đơn giản nhất, giúp người dùng điều hướng giữa các màn hình mà không cần làm mới trang hoặc ứng dụng.

Nó cũng cung cấp chức năng định tuyến, giúp người dùng điều hướng đến bất kỳ URL nào. Dựa trên URL được cung cấp trong cửa sổ trình duyệt, nó gọi các chức năng cụ thể để thực hiện một tác vụ cụ thể.

Hãy xem ví dụ sau để biết chức năng của nút quay lại.

Ví dụ này hiển thị danh sách lồng nhau không là gì ngoài danh sách bên trong danh sách, vì vậy khi bạn nhấp vào bất kỳ mục nào trong danh sách, nó sẽ mở ra một danh sách khác và nút quay lại xuất hiện trên đầu màn hình.

Để có cơ sở mã hoàn chỉnh, bạn có thể kiểm tra Danh sách lồng nhau trong phần xem thành phần.

định tuyến

Ví dụ đơn giản nhất về các tuyến đường

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

Trong ví dụ trên nếu URL của trình duyệt là https://myApp.com/#login thì hàm showLogin sẽ được gọi.

Chúng tôi có thể cung cấp các tham số trong URL và dựa trên tham số cụ thể mà hàm có thể được gọi. Ví dụ: Nếu URL là https://myApp.com/#user/3 thì một hàm userId khác sẽ được gọi và ID cụ thể có thể được sử dụng bên trong các hàm.

Định tuyến trước

Đôi khi chúng ta có các tham số trước bao gồm dấu phẩy, khoảng trống và các ký tự đặc biệt, v.v. cho điều này nếu chúng ta sử dụng cách viết tuyến đường ở trên thì nó sẽ không hoạt động. Để giải quyết vấn đề này, Sencha touch cung cấp định tuyến có điều kiện, nơi chúng tôi có thể chỉ định điều kiện của loại dữ liệu mà tham số sẽ chấp nhận.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

Vì vậy, như trong ví dụ trên, chúng tôi đã đưa ra regex trong điều kiện nêu rõ loại dữ liệu nào nên được phép làm tham số URL.

Chia sẻ cùng một URL trên các cấu hình thiết bị khác nhau

Vì Sencha touch cung cấp cấu hình thiết bị nên cùng một mã ứng dụng có thể được sử dụng trên nhiều thiết bị, có thể có các cấu hình khác nhau có thể có chức năng khác nhau cho cùng một URL.

Để giải quyết vấn đề này, Sencha touch cho phép chúng ta tự do viết định tuyến trong bộ điều khiển chính và chức năng được gọi sẽ được ghi trong tất cả các cấu hình với các cấu hình cụ thể của chúng.

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

Như ví dụ cho thấy chúng ta có một bộ điều khiển chính có chức năng showLogin và chúng ta có hai cấu hình khác nhau (Điện thoại / Máy tính bảng). Cả hai cấu hình đều có chức năng showLogin với mã khác nhau cụ thể cho cấu hình.

Bằng cách này, chúng tôi có thể chia sẻ cùng một URL trên nhiều thiết bị cấu hình với các chức năng cụ thể của chúng.