Legacy horizontal menu with ExtJS

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.

Post a Comment

Your email is never shared. Required fields are marked *

*
*