Question

First Q: is

controller.init function () {
    this.control(
    {

“live”? so that any further components added later on via UI events are also under the controllers watchful eye?

I am struggling to catch dynamically added link clicks by the controller:

controller

init: function () {
    this.control(
    {
      'component[cls=pfLink]': {
        click: this.onPfLinkClicked // NEVER GETS HERE 
      },
     'component': {
        click: this.onPfLinkClicked // DOESNT EVEN GET HERE 
      }

view

after store load:

  var cmp = Ext.create('Ext.Component', {
    autoEl: {
      tag: 'a',
      href: '#',
      cls: 'pfLink',
      html: ref
    }
  });
  this.add( {
    cellCls: 'question',
    xtype: 'container',
    items: cmp
  });

…

Answer 1

By default they are dynamic, you can verify this:

Ext.define('MyApp.controller.Test', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            'button[isOdd]': {
                click: function(btn) {
                    console.log('Odd', btn.text);
                }
            },
            'button[isEven]': {
                click: function(btn) {
                    console.log('Even', btn.text);
                }
            }
        });
    }
});

Ext.require('*');

Ext.application({
    name: 'MyApp',

    controllers: ['Test'],

    launch: function() {
        var vp = new Ext.container.Viewport(),
            i = 0,
            timer;

        timer = setInterval(function(){
            ++i;
            vp.add({
                xtype: 'button',
                text: 'Button ' + i,
                isOdd: i % 2 === 1,
                isEven: i % 2 === 0
            });
            if (i === 10) {
                clearInterval(timer);
            }
        }, 500);
    }
});

Your problem is that component doesn’t fire a click event. Instead, create a custom component:

Ext.define('MyApp.controller.Test', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            'foo[isOdd]': {
                click: function(cmp) {
                    console.log('Odd', cmp.el.dom.innerHTML);
                }
            },
            'foo[isEven]': {
                click: function(cmp) {
                    console.log('Even', cmp.el.dom.innerHTML);
                }
            }
        });
    }
});

Ext.define('Foo', {
    extend: 'Ext.Component',
    alias: 'widget.foo',

    afterRender: function(){
        this.callParent();
        this.el.on('click', this.fireClick, this);
    },

    fireClick: function(e){
        this.fireEvent('click', this, e);
    }
})

Ext.require('*');

Ext.application({
    name: 'MyApp',

    controllers: ['Test'],

    launch: function() {
        var vp = new Ext.container.Viewport(),
            i = 0,
            timer;

        timer = setInterval(function(){
            ++i;
            vp.add({
                xtype: 'foo',
                html: 'Button ' + i,
                isOdd: i % 2 === 1,
                isEven: i % 2 === 0
            });
            if (i === 10) {
                clearInterval(timer);
            }
        }, 500);
    }
});