Sencha Touch Resource Routing

{EAV_BLOG_VER:c29f605782f81784}

In MVC architecture, one of the great perks of routing is once you create the resourceful route, you usually don’t have to think about it again. Set up your actions and views, and you’re ready to go. Sencha Touch has brought the power of routing to their mobile JS framework, giving you an easy way to declare “URLs” which point to controllers and actions, but it does more than that, including abstracting History logic into the Dispatcher so that any Ext.redirect will automatically set the URL in the Ext.History space. You can read all you want about the Router and Dispatcher on Sencha’s site, but one thing I missed was the ability to declare a resourceful route. With Rails (3) you get to simply say “resources :transfers” and it will automagically recognize your index, create, and other routes for you. Thus, I added this handy little patch with 2 helpful methods (resources and alias), which allow me to do more than just “connect”, as so:

Ext.Router.draw(function(map) {
  map.connect('welcome', { controller: 'welcome', action: 'index' });
  map.connect('dashboard', { controller: 'dashboard', action: 'show' });
  map.connect('login', { controller: 'user_sessions', action: 'new' });
  map.connect('logout', { controller: 'user_sessions', action: 'destroy' });

  map.resources('transfers');
  map.resources('payments');
  map.resources('messages');
  map.resources('accounts');

  map.alias('bill_pay', 'payments');
  map.alias('message_center', 'messages');

  // more fluffy stuff...
});

Note the “map.resources” and “map.alias” lines, then check out the code below that does the work. Above, the map.resources(‘transfers’) line will produce 8 routes by default, including ‘transfers/index’, ‘transfers/new’, etc.

Get the Gist…

As you can see, the resources function simply generates the resourceful routes for you. The alias function is a convenience method really which, well, aliases a named route to another URL. So in this example, Ext.redirect(‘bill_pay’) is identical to Ext.redirect(‘payments’), both landing you in the index action of the payments controller. That’s it… feel free to use/comment at will. Happy coding!

Related posts:

1. Adding Callbacks to your Sencha Touch Controllers Short and sweet. I needed a callback in several of...

Related posts brought to you by Yet Another Related Posts Plugin.