ExtJS 6 – Router improvements

Introduction

With ExtJS 5.x, I was not convinced by the “Router” part of the framework. It was quite a mess, and implemented through Mixins. I remembered having a deep look on Saki example.

In ExtJS 6, the Router implementation is really a good step ahead, and remembers me the one I used in AngularJs. Sencha has made a detailed article over there.

Quick Summary

1. Put the default route in your Application declaration. Example:

   defaultToken : 'home', // default route

2. Defined routes with your Controller :

   routes : { 
     'users': 'onUsers',
     'user/:id' : 'onUser'
   },
   onUsers : function() {
     //...
   }
   onUser : function(id) {
     //...
   }

3. Update/Change route within Controller (here “this” is the controller)

   this.redirectTo('user/1234', true); // redirect

You can also setup some masks on route parameters and have BeforeRoute function (see Sencha doc for more details).

Multiple Routes

Finally, one point : ExtJs 6 supports multiple routes (routes pipe), with a route separator “|” (which could be changed): in that case, each route is handled sequentially by its order of appearance.

Reference: Sencha’s ExtJS 6 : Router

Conclusion

In ExtJS 6, Router is in line with AngularJS’ one and is a big step ahead since ExtJS5.x.