In Sencha Touch, controllers can now directly specify which routes they are interested in. This enables us to provide history support within our app, as well as the ability to deeply link to any part of the application that we provide a route for.

This is achieved by setting the routes configuration on the controller, shown as follows:

refs: {
          usersPanel: 'userlist'
},
routes: {
         'list': 'showUsersList',
         'users/:id': 'showUsersByDepartment'
}

In the previous code, we have defined the routes config on our Users controller where we have defined two routes—list and users/:id . Each of these two routes corresponds to a method inside the controller. The list route points to the showUsersList method of the controller and the users/:id route points to the showUsersByDepartment method. The following is the implementation of the two methods:

showUsersList: function() {
      var list = Ext.create('AM.view.user.List'),
      Ext.Viewport.add(list);
      Ext.Viewport.setActiveItem(list);
},
showUsersByDepartment: function(deptId) {
      var list = Ext.create('AM.view.user.List'),
      Ext.Viewport.add(list);
      Ext.Viewport.setActiveItem(list);
        
      this.getUsersStore().filterUsersByDepartment(deptId);
}

In the showUsersList method, we show the list of all the users. In the showUsersByDepartment method, we show the list of users filtered based on the department code passed to the method. Once these routes are set up, we can access them by accessing the following URLs:

FIN is the code for the Finance department.