New routing system for Ext JS

Server-side MVC frameworks usually have a built-in routing system that matches URLs with pre-defined routes, and then dispatches Controller Actions, parsing parameters, doing validation, and etc. This makes very easy to architect your app defining controllers and actions and having the routing engine solving the communication between parts.

Ext JS brings MVC to the client-side, providing a solid architecture for your application, but the only missing part is the routing system. That’s why Ext.ux.Router was created.

Ext.ux.Router was released a year ago, and today a new version is coming! It has a brand new routing engine that is extremely flexible and also provides route validation. It also ships with improved docs and examples, and test cases to ensure code quality.

Check it out for free at market.sencha.com

Ext.application({
    name: 'App',
    ...
    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'
        }
    }
});