Sencha Touch - การสนับสนุนประวัติ

Sencha Touch มาพร้อมกับการสนับสนุนประวัติเต็มรูปแบบและสิ่งอำนวยความสะดวกในการเชื่อมโยงในรายละเอียด

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

นอกจากนี้ยังมีฟังก์ชันเส้นทางซึ่งช่วยให้ผู้ใช้นำทางไปยัง URL ใด ๆ ตาม URL ที่ให้ไว้ในหน้าต่างเบราว์เซอร์เรียกใช้ฟังก์ชันเฉพาะเพื่อดำเนินการเฉพาะ

ดูตัวอย่างการทำงานของปุ่มย้อนกลับต่อไปนี้

ตัวอย่างนี้แสดงรายการที่ซ้อนกันซึ่งไม่มีอะไรเลยนอกจากเป็นรายการภายในรายการดังนั้นเมื่อคุณคลิกรายการใดรายการหนึ่งรายการใดรายการหนึ่งรายการใดรายการหนึ่งจะเปิดรายการอื่นและปุ่มย้อนกลับจะปรากฏที่ด้านบนของหน้าจอ

สำหรับฐานรหัสที่สมบูรณ์คุณสามารถตรวจสอบรายการที่ซ้อนกันภายใต้ส่วนดูส่วนประกอบ

การกำหนดเส้นทาง

ตัวอย่างเส้นทางที่ง่ายที่สุด

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

ในตัวอย่างข้างต้นหาก URL ของเบราว์เซอร์คือ https://myApp.com/#login ฟังก์ชัน showLogin จะถูกเรียกใช้

เราสามารถระบุพารามิเตอร์ใน URL และขึ้นอยู่กับพารามิเตอร์เฉพาะที่ฟังก์ชันสามารถเรียกใช้ได้ ตัวอย่างเช่นหาก URL คือ https://myApp.com/#user/3 ฟังก์ชันอื่นจะถูกเรียกใช้ userId และสามารถใช้ ID เฉพาะภายในฟังก์ชันได้

การกำหนดเส้นทางล่วงหน้า

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

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

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

การแบ่งปัน URL เดียวกันในโปรไฟล์อุปกรณ์ต่างๆ

เนื่องจาก Sencha touch มีโปรไฟล์อุปกรณ์ดังนั้นจึงสามารถใช้รหัสแอปพลิเคชันเดียวกันในอุปกรณ์หลายเครื่องจึงอาจมีความเป็นไปได้ที่โปรไฟล์ที่แตกต่างกันอาจมีฟังก์ชันการทำงานที่แตกต่างกันสำหรับ URL เดียวกัน

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

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

ดังตัวอย่างแสดงให้เห็นว่าเรามีตัวควบคุมหลักหนึ่งตัวที่มีฟังก์ชัน showLogin และเรามีสองโปรไฟล์ที่แตกต่างกัน (โทรศัพท์ / แท็บเล็ต) ทั้งสองโปรไฟล์มีฟังก์ชัน showLogin พร้อมรหัสที่แตกต่างกันเฉพาะสำหรับโปรไฟล์

ด้วยวิธีนี้เราสามารถแชร์ URL เดียวกันในอุปกรณ์โปรไฟล์หลายเครื่องพร้อมฟังก์ชันเฉพาะ