Ext.ux.Router

Lightweight JavaScript routing engine for Ext JS 4 MVC based on javascript-route-matcher project. It enables your application to monitor URL changes and dispatch controllers actions based on defined routes. It also provides browser history navigation capabilities.

Check the CHANGELOG

Getting Started

$ git clone git@github.com:brunotavares/Ext.ux.Router.git

It comes with:

• Router.js
• Examples
• Tests

Usage

1. Copy Router.js to your application. Folder suggested {root}/lib/Router.js;

   a. If you use the old Sencha Command v2, configure Ext.Loader path:

        Ext.Loader.setConfig({
            enabled: true,
            paths: {
                'Ext.ux.Router': 'lib/Router.js'
            }
        });
   

   b. If you use the new Sencha Command v3+, open .sencha/app/sencha.cfg and add the dependency to your path:

        app.classpath=${app.dir}/app,${app.dir}/../../Router.js
   

   After that, run "sencha app refresh" on your terminal. Sencha CMD will read all dependencies and update
   the bootstrap.js file.

   Check my example Single Page for more details.
   
   

2. Add the class requirement to your application start and setup routes (see below the Route Format):

    Ext.application({
        name: 'App',
        autoCreateViewport: true,
        requires: [
            'Ext.ux.Router'
        ],
        controllers: [
            'Home', 
            'Users'
        ],
        views: [
            'Viewport',
            'user.List',
            'user.Form'
        ],
        routes: {
            '/': 'home#index',
            'users': 'users#list',
            'users/:id/edit': 'users#edit'
        }
    });
   

3. Create your controllers and actions according to your routes;

    Ext.define('App.controller.Home', {
        extend: 'Ext.app.Controller',
        index: function() {
            //TODO: index
        }
    });
   
    Ext.define('App.controller.Users', {
        extend: 'Ext.app.Controller',
        list: function() {
            //TODO: render list
        },
        edit: function(params) {
            //TODO: render edit
        }
    });
   

Route Format

This is a summary of the test cases present on test/index.html. You can check this file for more info on what are all the route formats and what they match.

Essentially you can specify:

• simple routes 'users';
• routes with parameters 'users/:id/:login';
• routes with splat 'users?*args';
• mixed routes 'users/:id/*roles/:login/*groups';
• regular expressions '/^(users?)(?:\/(\d+)(?:\.\.(\d+))?)?/'.

In addition, routes can have validators, so you can check if the id is integer, etc.

routes: {
    '/': 'home#index',
    
	'users'                         : 'users#index',
	'users/:id'                     : 'users#show',
    'users/:id/:login'              : 'users#show',
    'users/*names'                  : 'users#showAll',
    'users/*ids/*names'             : 'users#showAll',
    'users/:id/*roles/:name/*groups': 'users#show',
    
    'search/:query/p:page'              : 'search#exec',
    '*first/complex-:part/*rest'        : 'home#complex',
    ':entity?*args'                     : 'home#base',
    
    
    'invoices/:id': {
        controller: 'invoices',
        action: 'show',
        id: /^\d+$/
    },
    
    'groups/:id': {
		controller: 'groups',
		action: 'show',
		id: function(value) {
			return value.match(/^\d+$/);
		}
	},
    
    'clients or client': {
        regex: /^(clients?)(?:\/(\d+)(?:\.\.(\d+))?)?/,
        controller: 'clients',
        action: 'index'
    }
}

License

Copyright 2012 Bruno Tavares
Released under the MIT license
Check MIT-LICENSE.txt