Sencha Touch - History Support

Sencha touch comes with the full history support and deep linking facilities.
It has simplest back button functionality which helps user to navigate between the screens without even refreshing the page or application.

It also provides routes functionality which helps user to navigate to any URL and based on the URL provided in the browser window it calls specific functions to perform specific task.
See the below example for back button functionality
This example shows the nested list which is nothing but a list inside a list, so when you click any of the list items it opens another list with a back button appears on top of the screen.
For complete code base you can check Nested List under view component section.

Routing

Simplest example of routes:

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

In the above example if browser URL is https://myApp.com/#login then the function showLogin will be called.
We can provide parameters in the URL and based on the specific parameter the function can get called. For example If the URL is https://myApp.com/#user/3 then the another function userId will be called and the specific ID can be used inside the functions.

Advance routing

Sometime we have advance parameters which includes comma, blank space and special characters etc. for this if we use the above way of writing routes then it will not work. To solve this problem Sencha touch provides conditional routing where we can specify condition of what type of data the parameter should accept.

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

So as in the above example we have given regex in the condition which clearly states what type of data should be allowed as URL parameter.

Sharing same URL across different device profiles

As Sencha touch provides device profile so the same application code can be used across multiple devices there may be possibilities that different profiles may have different functionality for the same URL.
To resolve this issue Sencha touch gives us freedom to write routing in the main controller and the called function to be written in the all the profile with their profile specific ones.

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

As example shows we have one main controller which has showLogin function and we have two different profiles(Phone/ Tablet). Both the profile has showLogin function with different code specific to the profile.
This way we can share same URL across multiple profile devices with their specific functionalities.