sencha touch Ext.Router

I am having trouble getting Ext.Router to register changes 开发者_StackOverflowto the URL. I started my application with the example for model view controller on sencha touch site.

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'startup.png',
    icon: 'icon.png',

    onReady: function() {
       KOI.views.viewport = new KOI.views.Viewport();
    }
});

And I have a routes file, (loaded before app)

Ext.Router.draw(function(map) {
      map.connect("main", { controller: 'menu', action: 'index' });
});

This is the controller

KOI.controllers.menus = new Ext.Controller({
    index: function(options) {
        KOI.views.viewport.setActiveItem(KOI.views.mainMenu);
    }
});
Ext.regController('menu', KOI.controllers.menus);

but changing the URL to http://myapp.com/#main does nothing, although the controller does work. Any ideas what I am missing? Any help would be greatly appreciated. There isnt very much documentation for Ext.router and I cant see a good way to debug whats going on.

Ext.setup is equivalent to Ext.onReady and does nothing else but call a callback function when the dom is loaded and accessible.

Ext.regApplication however creates a new Ext.Application, passing in your config object to it.

Part of an Ext.Application is the Ext.Application.onBeforeLaunch and Ext.Application.launch. onBeforeLaunch sets up history support if you have that enabled, and then calls launch.

If launch doesn't return false then onBeforeLaunch will go ahead and call Ext.redirect with either your last history item / token, your defaultUrl or if all else fails {controller: 'application', action: 'index'}