"Translate" How to use Routing in Ext JS 5 application

Original: How to use Routing in Your Ext JS 5 Apps

Brief introduction

EXT JS 5 is an important release that provides a number of new features to create rich, enterprise-class Web applications. MVVM and bidirectional data binding have taken a lot of heavy work for developers. In ext JS 5, another new feature is routing, it can easily manage the history in the controller. The forward and Back buttons are common user interfaces that each browser will have, and now, using the EXT JS 5 to handle navigation in a single-page application is fairly straightforward.

EXT JS 5 Routing

In Ext JS, you can already use the Ext.util.Histroy class to handle changes in history, but in Ext JS 5, this processing becomes easier and more flexible. Routing provides a more easily configurable way to map hash values to a controller, including using parameters and previous behavior to control the flow of routing execution, while the backend uses Ext.util.History to handle it. Let's look at a simple example:

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

In the Routing object, the keyword "home" is the hash value to match, and the value "Onhome" is the method in the controller, which executes the method when the hash matches only (for example: Http://localhost#home). To change the hash value within the controller, you can use the Redirectto method:

This.redirectto (' home '); Redirects to Http://localhost#home

This modifies the hash value of the URL to "#home" and then executes the Onhome method defined by the MyApp.controller.Main controller instance in the middle. If more than one controller matches the same hash value, the order of execution will be executed according to the order defined in the controller array of the application instance.

hash values and Parameters

Hash values can also contain parameters, and routes can easily pass them as parameters to the controller's method. The hash value with the parameter looks like "#user/1234", where 1234 is the user's ID and will be used as a parameter. You can define a hash value for a controller in the following ways:

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

When configuring an expected parameter for a route, you need to add a colon before the parameter name, and in the above example the parameter is ": ID", and the route will pass any value that is matched as a pass parameter to the Onuser method. The parameters passed to the controller method are in the same order as the route definition.

You can also use regular expressions to control which hash values to match. In the example of a user ID, the ID can only be a numeric value, not a different value, in order to control the match, the conditions configuration entry is available in the route:

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

The example demonstrates two things: the definition of a route can be an object, the Action property corresponds to the controller's method, and the conditions configuration item is used. Configuration item conditions is an object that contains parameters and regular expression strings. A regular expression string is used instead of a regular expression because the route creates a default regular expression based on the parameters within the route, and the conditions configuration item overrides the default regular expression string. The default regular expression string is "([%a-za-z0-9\\-\\_\\s,]+)".

If there is no hash value for the route, the Unmatchedroute event is triggered in the application, which can be monitored in the application or in the controller, regardless of where the listener is in the same way. The following is an example of listening in the controller:

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

Sometimes, to prevent a route from continuing or waiting for an asynchronous operation such as an AJAX request to delay execution, you need to suspend the routing process. To achieve this, the before operation can be defined in the route, and any parameters defined in the route are passed to it. The following is an example of using an AJAX request and continues to execute the route after the request is completed:

    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 receives the ID parameter just like the Onuser method, but it can also get an action parameter. The parameter action contains the resume and stop methods used to control the execution of the route. The Resume method that executes the action, as in the success processing of Ext.Ajax.request, will resume the execution of the route, so that the asynchronous behavior of the route can be implemented. The Stop method that executes the action, as in the failure callback function, stops the execution of the current route as you hit it. If true is passed to the Stop method, all routes in the queue will stop executing, allowing complete control of the route.

The Ext JS application can become very large and complex, and sometimes you might want to activate multiple hash values at the same time. EXT JS 5 has the ability to process multiple hash values and execute them separately. The individual hash values are sandboxed, which means that if you need to cancel a route, you can pass true to the Action.resume method, which prevents other routes of the hash value, while the other hash values continue to execute. Each hash value needs to be delimited, such as the hash value of the following example:

#user/1234|message/5ga

Routing splits the hash values into "user/1234" and "Message/5ga". The route locates all matching routes and executes any matching routes based on the user's value. If there is no route matching the hash value, the Unmatchedroute event is triggered. Next, the route will look for any matching routes and execute them based on the value of the message. If there is no route matching the value, the Unmatchedroute event is triggered.

Summary

The new routing feature in Ext JS 5 is a simple way to configure the browser history stack, which is flexible and powerful enough to meet the needs of a replicated application. Together with MVC+VM, bi-directional data binding and other new features, ext JS 50% is the perfect framework for building enterprise applications.

Mitchell Simoens
Mitchell is a Senior support Engineer providing support on the forums and the portal. Mitchell also is the maintainer of Sencha fiddle and other web properties. Mitchell is also the co-author of ' Sencha Touch in Action ', and is a regular contributor of Ext JS and Sencha Touch Framew Orks, as well as extensions and plugins on GitHub.