Skip to content

JavaScript routing engine for Sencha Ext JS 4 MVC Architecture

Notifications You must be signed in to change notification settings

sigerello/Ext.ux.Router

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 [email protected]:brunotavares/Ext.ux.Router.git

It comes with:

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

About

JavaScript routing engine for Sencha Ext JS 4 MVC Architecture

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.9%
  • CSS 0.1%