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();
           });
      }
   }
})

Answer 2

I have struggled with issue as well. The bottom line is the Controller control config does not work like the regular listeners and will only act on the events which are fired by the component and not by DOM as s_hewitt pointed out.

The alternatives are somewhat ugly with essentially listeners on the components or parent components where you can use delegates as well. Once you go that route it's not as clean cut as setting up listeners in the controller.

Another trick I used to get around this limitation is calling controller methods from the view components like this:

MyApp.app.getController('MyController').myFunction();