Sencha Touch - Dukungan Sejarah

Sencha Touch hadir dengan dukungan riwayat lengkap dan fasilitas tautan dalam.

Ini memiliki fungsi tombol kembali paling sederhana, yang membantu pengguna menavigasi di antara layar, bahkan tanpa menyegarkan halaman atau aplikasi.

Ini juga menyediakan fungsionalitas rute, yang membantu pengguna menavigasi ke URL apa pun. Berdasarkan URL yang disediakan di jendela browser, itu memanggil fungsi tertentu untuk melakukan tugas tertentu.

Lihat contoh berikut untuk fungsionalitas tombol kembali.

Contoh ini memperlihatkan daftar bersarang yang tidak lain adalah daftar di dalam daftar, jadi saat Anda mengklik salah satu item daftar, daftar lain akan terbuka dan tombol kembali muncul di atas layar.

Untuk basis kode lengkap, Anda dapat memeriksa Daftar Bersarang di bawah bagian tampilan komponen.

Rute

Contoh rute paling sederhana

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

Pada contoh di atas jika URL browser adalah https://myApp.com/#login maka fungsi showLogin akan dipanggil.

Kami dapat memberikan parameter di URL dan berdasarkan parameter tertentu fungsi tersebut dapat dipanggil. Misalnya Jika URL-nya adalah https://myApp.com/#user/3 maka fungsi lain userId akan dipanggil dan ID spesifik dapat digunakan di dalam fungsi.

Perutean lanjutan

Terkadang kita memiliki parameter lanjutan yang meliputi koma, spasi kosong dan karakter khusus dll. Untuk ini jika kita menggunakan cara penulisan rute di atas maka itu tidak akan berfungsi. Untuk mengatasi masalah ini Sencha touch menyediakan perutean bersyarat di mana kita dapat menentukan kondisi jenis data apa yang harus diterima oleh parameter.

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

Jadi seperti pada contoh di atas kami telah memberikan regex dalam kondisi yang dengan jelas menyatakan jenis data apa yang harus diizinkan sebagai parameter URL.

Berbagi URL yang sama di berbagai profil perangkat

Karena Sencha touch menyediakan profil perangkat sehingga kode aplikasi yang sama dapat digunakan di beberapa perangkat, ada kemungkinan bahwa profil yang berbeda mungkin memiliki fungsi yang berbeda untuk URL yang sama.

Untuk mengatasi masalah ini Sencha touch memberi kita kebebasan untuk menulis perutean di pengontrol utama dan fungsi yang dipanggil untuk ditulis di semua profil dengan profil khusus mereka.

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

Sebagai contoh, kami memiliki satu pengontrol utama yang memiliki fungsi showLogin dan kami memiliki dua profil yang berbeda (Telepon / Tablet). Kedua profil tersebut memiliki fungsi showLogin dengan kode berbeda khusus untuk profil tersebut.

Dengan cara ini kami dapat membagikan URL yang sama di beberapa perangkat profil dengan fungsi spesifiknya.