Routing in ExtJS 5 using MVVM


This example shows how to implement routing in ExtJS 5 application. The application uses MVVM architecture and the routing is implemented in a mixin for main view controller.

Using of mixin is not mandatory; here it is used to separate routing logic from the rest of main view controller for modularity.

Important note: The application runs in iframe so you do not see how url changes when selecting customers in the grid or view. However, browser’s back and forward buttons work to navigate within the application.

If you want to see how url changes open the application in new window.

Main Features

  • the application uses MVVM architecture and data binding
  • customers can be selected in the grid or data view, the selection is synchronized
  • the routing is implemented in a mixin used in main view controller
  • map uses Google geocoder to find location from the address
  • uses font icons
  • beginners warning: the application uses advanced techniques

Use Cases

This approach to routing is suitable for applications that has a definite main container (viewport) where the routing can be implemented easily. For application that are not viewport-based, use Routing in ExtJS 5 using MVC Controller example.

Source Files

The application consists of many files so only sources relevant to routing are listed for the sake of simplicity. They are:

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)


  1. yellen seram says

    It’s a wonderful post. Loved it.

    I’ve a question –

    Say, if the grid is made editable and store sync happens on the click of a button – the grid will remain dirty unless the button is clicked. Now, how do we prevent someone from going to the view or the map if the grid is dirty (change not synced)?

    • says

      There might be several ways depending on the specific requirements. One of the ways could be to listen to beforetabchange event on TabPanel and return false if the store is dirty. Or you can disable those tabs on editing and re-enable on successful save.

  2. Dave King says

    How is the {tab} bind set ?
    The setting of the defaultRoute is fired but any subsequent tab changes are not hitting the mixin.

    Many Thanks,

    (off topic ps: I’ve e-mailed you a question regarding annual membership…)

    • says

      Hi Dave,

      haven’t you overlooked lines 113-115 of Router.js where is implemented tabchange handling.

      PS: Hope your e-mail request has been handled.

  3. Bryan Shaw says

    I got confused at load: action.resume.
    action is actually a function “processRoute, am I right?
    So what is the action.resume?

We will be happy to hear back from you

Please Login to post a comment