Sencha Touch - obsługa historii

Sencha Touch oferuje pełną obsługę historii i funkcje głębokiego linkowania.

Posiada najprostszą funkcjonalność przycisku Wstecz, który pomaga użytkownikowi nawigować między ekranami, nawet bez odświeżania strony lub aplikacji.

Zapewnia również funkcjonalność tras, która pomaga użytkownikowi przejść do dowolnego adresu URL. Na podstawie adresu URL podanego w oknie przeglądarki wywołuje określone funkcje w celu wykonania określonego zadania.

Spójrz na poniższy przykład, aby zapoznać się z funkcją przycisku Wstecz.

Ten przykład pokazuje zagnieżdżoną listę, która jest niczym innym jak listą wewnątrz listy, więc po kliknięciu dowolnego elementu listy otwiera się kolejna lista, a na górze ekranu pojawia się przycisk Wstecz.

Aby uzyskać pełną bazę kodu, możesz sprawdzić listę zagnieżdżoną w sekcji komponentu widoku.

Wytyczanie

Najprostszy przykład tras

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

W powyższym przykładzie, jeśli adres URL przeglądarki to https://myApp.com/#login, zostanie wywołana funkcja showLogin.

Możemy podać parametry w adresie URL i na podstawie konkretnego parametru można wywołać funkcję. Na przykład, jeśli adres URL to https://myApp.com/#user/3, zostanie wywołana inna funkcja userId, a określony identyfikator będzie mógł zostać użyty wewnątrz funkcji.

Trasowanie zaawansowane

Czasami mamy parametry zaawansowane, które obejmują przecinek, spację i znaki specjalne itp., Jeśli użyjemy powyższego sposobu pisania tras, to nie zadziała. Aby rozwiązać ten problem, Sencha touch zapewnia routing warunkowy, w którym możemy określić stan, jaki typ danych powinien akceptować parametr.

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

Tak więc, jak w powyższym przykładzie, podaliśmy wyrażenie regularne w warunku, który jasno określa, jaki typ danych powinien być dozwolony jako parametr adresu URL.

Udostępnianie tego samego adresu URL w różnych profilach urządzeń

Ponieważ Sencha touch zapewnia profil urządzenia, więc ten sam kod aplikacji może być używany na wielu urządzeniach, mogą istnieć możliwości, że różne profile mogą mieć różne funkcje dla tego samego adresu URL.

Aby rozwiązać ten problem, Sencha touch daje nam swobodę pisania routingu w głównym kontrolerze i wywoływanej funkcji, która ma być zapisana w całym profilu z ich profilami specyficznymi.

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

Jak pokazuje przykład, mamy jeden główny kontroler, który ma funkcję showLogin i mamy dwa różne profile (telefon / tablet). Oba profile mają funkcję showLogin z innym kodem specyficznym dla profilu.

W ten sposób możemy udostępniać ten sam adres URL na wielu urządzeniach profilowych z ich określonymi funkcjami.