Ext.ux.Router by Bruno Tavares – Version 2.0

Categories

JavaScript routing engine for Sencha Ext JS 4 MVC Architecture. Enables browser history and Controller Actions routing dispatch.

Show more

Products:

  • Ext JS 4.1
  • Ext JS 4.0

Browsers:

  • Safari (desktop)
  • Opera (desktop)
  • IE9+ (desktop)
  • IE8+ (desktop)
  • IE7+ (desktop)
  • IE6+ (desktop)
  • IE10+ (desktop)
  • Firefox (desktop)
  • Chrome (desktop)

Screenshots

  • Routes in Ext.Application

    Define the route map inside your application entry file.

    Show more
  • Controller Actions

    Action methods inside controllers will be called once Ext.ux.Router finds a match.

    Show more
  • Routes in Ext.Application

    Define the route map inside your application entry file.

    Show more

Readme

Ext.ux.Router

github.com/brunotavares/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

Version History

  • Version 2.0

    Description:
    • Replace routing engine using javascript-route-matcher (https://github.com/cowboy/javascript-route-matcher). Much more flexible and reliable. It also adds route validation.

    • Bugs reported by users were fixed with new routing engine.

    • Updating class definition to use singleton and better structure.

    • Adjust compatibility with new Sencha Command.

    • Create tests.

    • New example 'Single Page'.

    • Updated README, LICENSE and code documentation.

  • Version 1.0

License

Other extensions by Bruno Tavares

  • Screenshot

    Ext.ux.InstallApp

    Enhance the native experience with this floating baloon for iOS. It gives your users instructions on how to add your app to their homescreen.

  • Screenshot

    MoneyField for Ext JS

    Provides an easy to use numeric money field that has keystroke filtering to disallow non-numeric characters and also auto-formatting with decimal and centesimal separators.

Other extensions in components

  • Screenshot

    SlideNavigation2

    A navigational component that utilizes a list which is hidden when not in use. Inspired by Facebook's sliding menu system.

  • Screenshot

    Datetimepicker

    Component to select datetime value.

  • Screenshot

    Pinch Zoom Image

    Able to use a pinch-zoom and touch panning a image in the sencha touch 2.

  • Screenshot

    Ext.ux.grid.FilterBar

    Plugin that enable filters on the grid headers

  • Screenshot

    Animated CSS3 button menu

    This component gives you an alternate way to build a cool menu in you Sencha Touch app. The menu is rendered and animated in path menu like style with CSS3 transition animations.

Reviews

Be the first to leave a review.