Description

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:

app/view/MainModel.js
app/view/MainController.js
app/mixin/Router.js
If you want to see the example code, login or sign-up. Free membership is available.
Follow me:
Latest posts by saki (see all)

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?