events - ExtJSコントローラーに動的に追加されたコンポーネントのイベントをサブスクライブさせる最良の方法

Question

最初のQ：は

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

"住む"？後でUIイベントを介して追加されたコンポーネントも、コントローラーの監視下に置かれるようにしますか？

コントローラによって動的に追加されたリンククリックをキャッチするのに苦労しています。

コントローラ

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

見る

ストアロード後：

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

..。

Answer 1

デフォルトでは動的ですが、これを確認できます。

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

問題は、コンポーネントがクリックイベントを発生させないことです。代わりに、カスタムコンポーネントを作成します。

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