ExtJS Controller trigger on hyperlink click

Question

I've been trying to get this to work for quite a while now but I still haven't been able to find a solution for this except adding a afterrender inside listeners in the view. But I want the controller to handle it.

Does anyone have an idea on how I can solve this?

This is what I have in my files at the moment http://pastie.org/2751446

controller/App.js

    Ext.define('HD.controller.App', {
     extend: 'Ext.app.Controller'
     ,views: [
         'core.Header',
         'core.Navigation',
         'core.Content'
     ]
     ,init: function() {
         this.control({
             'navigation a[id=tab1]': {
                 click: this.newTab
             }
         })
     }
     ,newTab: function() {
         console.log('Tab 1 should be loaded now');
     }
});

view/core/Navigation.js

Ext.define('HD.view.core.Navigation', {
     extend: 'Ext.panel.Panel'
    ,name: 'navigation'
    ,alias: 'widget.navigation'
    ,layout: 'accordion'
    ,region: 'west'
    ,width: 200

    ,title: 'Navigation'
    ,collapsible: true

    ,items: [
        {
            title: 'Title 1'
            ,html: '<a id="tab1" style="cursor:pointer;">Tab 1</a>'
        },
        {
            title: 'Title 2'
            ,html: 'Second'
        }
    ]
});

Answer 1

The way you are trying to reference the hyperlink a won't work.

this.control({
   'navigation a[id=tab1]': {
      click: this.newTab
   }
})

That will only look for ExtJS components, not DOM elements. You will most likely have to attach the click in afterrender or somewhere similar. This does not mean you can't leave the methods that do all the work in the controller.

Edit:

var controller = this;
controller.control({
   'navigation': {
      afterrender: function() {
           Ext.get('tab1').on('click', function() {
                controller.newTab();
           });
      }
   }
})