Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

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:

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

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.