How to use Routing in Ext JS 5

Routing is a new feature in Ext JS 5 that allows you to associate navigation history with a controller. The Back / Forward buttons - one of the main parts of the browser interface and with Ext JS 5 to make navigation in one-page applications became very simple.

Routing in Ext JS 5

Ext JS always allowed us to handle the navigation history using the Ext.util.History class, but in Ext JS 5 we made this process even simpler and more flexible. The router provides a simple connection configuration of hash tokens and controller methods with parameter support and route control (behind the scenes Ext.util.History is used). Let's look at a simple example:

Ext.define('MyApp.controller.Main', { extend : 'Ext.app.Controller', routes : { 'home' : 'onHome' }, onHome : function() {} }); 

In the routes object, the home key is a hash, and onHome is a method in the controller that is executed when navigating through it (for example: localhost#home localhost#home ). To change the hash inside the controller, you can use the redirectTo method:
')

  this.redirectTo('home'); //  http://localhost#home 

This will change the hash of the URL to #home , which in turn will call the onHome method, where the context will be the instance of the MyApp.controller.Main controller in which the route was defined. If you have the same route registered in several controllers, then the sequence of execution will be the same in which the application controllers are registered ( controllers array).

Hash tokens and parameters

The hash token can contain parameters, and the router passes them to the controller methods as arguments. The hash may look like '# user / 1234' , where 1234 is the user ID. To match this hash, the controller is configured as follows:

  Ext.define('MyApp.controller.Main', { extend : 'Ext.app.Controller', routes : { 'user/:id' : 'onUser' }, onUser : function(id) {} }); 

When configuring a route with parameters, a colon is preceded by the parameter name. In this case, it is : id . The router will take any transferred value and pass it to the onUser method. The order of the arguments passed to the method is the same as the order of the parameters specified in the route.

You can control the matching of hash parameters using regular expressions. In the example above, the ID can contain only numbers, and the other values ​​should not match. For this, the conditions configuration is used:

  Ext.define('Fiddle.controller.Main', { extend : 'Ext.app.Controller', routes : { 'user/:id' : { action : 'onUser', conditions : { ':id' : '([0-9]+)' } } }, onUser : function(id) {} }); 

This example shows two things: a route can be an object, in which the action key is a controller method, and conditions is an object with parameters and regular expression strings. The reason why a regular expression is written in a string is because the router creates the main expression based on the parameters of the route. The conditions config allows overriding regular expressions by default. The default regular expression for string parameters is '([% a-zA-Z0-9 \\ - \\ _ \\ s,] +)' .

To handle the transition on a route for which there are no matches, there is an unmatchedroute event. Its handler can be hung both on the application and on the controller. For example, on the controller:

  Ext.define('Fiddle.controller.Main', { extend : 'Ext.app.Controller', listen : { controller : { '*' : { unmatchedroute : 'onUnmatchedRoute' } } }, onUnmatchedRoute : function(hash) {} }); 

Sometimes it is necessary to catch the transition along a route in order to stop its execution or continue after performing some asynchronous action, for example, an ajax request. To do this, use the key key in the route. Here is an example in which the execution of the route continues after an ajax request:

  Ext.define('Fiddle.controller.Main', { extend : 'Ext.app.Controller', routes : { 'user/:id' : { action : 'onUser', before : 'beforeUser', conditions : { ':id' : '([0-9]+)' } } }, beforeUser : function(id, action) { Ext.Ajax.request({ url : '/user/confirm', params : { userid : id }, success : function() { action.resume(); }, failure : function() { action.stop(); } }); }, onUser : function(id) {} }); 

The beforeUser method accepts an id argument by analogy with onUser , as well as an action , in which there are resume and stop methods that control the execution of the route. The action.resume () method will continue the route, allowing it to be made asynchronous, and action.stop () will prevent its execution. If you pass the argument true to the stop method, the execution of all routes will be stopped.

Ext JS applications are getting bigger and more complex, and they may require processing multiple hash tokens at the same time. In Ext JS 5, this feature is implemented, and each hash token is processed separately in its sandbox. This means that if you cancel one route, passing true to the action.stop method, it will cancel the routes for this hash token only, and the rest will continue. Each token must be separated by a vertical line:

  #user/1234|message/5ga 

The router will split the hash and get the 'user / 1234' and 'message / 5ga' tokens . First, it will process the user token, find all the routes that match it and execute them. If no route is found matching this token, the unmatchedroute event will be triggered . Then the router will go to the message token and by analogy find the associated routes. If not found, the unmatchedroute event will be raised .

Conclusion

The new router in ExtJS 5 is easy to configure and also allows you to easily handle the history of the browser, while it remains flexible and powerful to meet the requirements of complex applications. Together with MVC + VM, bidirectional data binding and other new features, Ext JS 5 is an excellent framework for enterprise applications.