events - 让 Ext JS 控制器订阅动态添加组件的事件的最佳方式

Question

第一个问：是

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