It’s easy to leverage ExtJS to build a legacy navigation menu, assuming you don’t need search engine visibility.
v.Menu = Ext.extend(Ext.Toolbar, { renderTo: 'menu', initComponent:function() { this.targets = { 'menu-button-people':'/people', 'menu-button-companies':'/companies' }; var items = []; items.push({ text: 'People' }, { text: 'Companies' }); for(var i=0; i<items.length; i++) { var id = items[i].text.toLowerCase().replace('/[^a-z]', ''); Ext.applyIf(items[i], { listeners:{ click:{scope:this, fn:this.onClick} }, id: String.format('menu-button-{0}', id), tooltip: String.format('List {0}', items[i].text) }); }; this.items = items; v.Menu.superclass.initComponent.apply(this, arguments); }, onClick: function(el) { location.href = this.targets[el.id] || '/'; } });
Using the component extension method, simply extend Ext.Toolbar. I don’t take any arguments, but it would be easy to modify to allow the menu entries to instead be passed in. DRY (Rubyism for do not repeat yourself) is satisfied with a for loop.
A click handler is registered for each button, allowing a redirect to the correct href on click.
Useful for a legacy app, but less so for a single page ExtJS app.