Sencha Touch - History Support

Advertisements

Previous Page
Next Page  

Sencha Touch comes with full history support and deep linking facilities.

It has the simplest back button functionality, which helps the user navigate between the screens, without even refreshing the page or application.

It also provides routes functionality, which helps the user navigate to any URL. Based on the URL provided in the browser window, it calls specific functions to perform a specific task.

Look at the following 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 and 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.

Advertisements