Server-side MVC frameworks usually have a built-in routing system that matches URLs with pre-defined routes, and then dispatches Controller Actions, parsing parameters, doing validation, and etc. This makes very easy to architect your app defining controllers and actions and having the routing engine solving the communication between parts.
Ext JS brings MVC to the client-side, providing a solid architecture for your application, but the only missing part is the routing system. That’s why Ext.ux.Router was created.
Ext.ux.Router was released a year ago, and today a new version is coming! It has a brand new routing engine that is extremely flexible and also provides route validation. It also ships with improved docs and examples, and test cases to ensure code quality.
Check it out for free at market.sencha.com
Ext.application({ name: 'App', ... 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' } } });
Is it possible to have the router action updating multiple (viewport-target)s by passing to each a view?
Thanks you
Could you elaborate a little bit? I want to say yes, since the Router will deal with the action dispatch, and then it’s your responsability to render the views, but perhaps I can help with this piece too.
Hi,
First Thank you for the quick response.
what I’m trying to do is:
imagine you have a dashboard and when clicking a button, you want to update/change one or two widgets only, not the entire viewport.
the main action can load the view associated with it to a div target (a widget )and
we can update the other div target (2nd widget) manualy.
is there a way to do this in the dispatch method or it should be handled in the controller manually?
Thank you again
The “singlepage” example that is available at Github showcases how to automatize the dispatch by handling it on the “dispatch” event, but if you need more control over it, you should use controller actions. So I guess it will be more manual.
I just released a new example along with a new blog post showing an alternative way to handle rendering. Hope it helps!
Great extension which makes ExtJS controllers work much better than out of the box. Tested with version 4.2.2. Thank you for saving me 3-5 days of work.
One drawback: can’t use automatic initialization. In the `application.launch` method I initialize viewport, then call `Router.init(app)`. And it would be perfect if you add another parameter to the `init` method which allow me to set listeners without calling `Router.on`.
What is this childish ranting? Jai, if you jokingly or seriously don’t approve of kids , why shove your ideas with a shovel.(Pun intended). No need to become a pontiff in matters which are personal and no need to point out future addsstagea/vinadvantages to parents.
[…] a big advocate on routing URLs to your application flow, and I even developed an extension Ext.ux.Router for Ext 4 and wrote a guides on […]