Javascript EXTJS使用tpl向动态创建的元素添加fireEvent

我使用

new Ext.XTemplate

将一组对象应用于html，然后将结果作为html应用于面板。当我点击按钮时，使用委托一切正常

问题：

如何向动态添加的按钮添加事件，以便在控制器中使用它们

initComponent: function() {
    var me = this;

    var data = [{
        caption: 'Dashboard',
        myclass: 'dashboard'
    }, {
        caption: 'clients',
        myclass: 'clients'
    }];


    var myTpl = new Ext.XTemplate(
        '<table><tr>',
        '<tpl for="."><td>',
        '<div style="width:200px;background-color:#004544;" class="thumb-wrap">',
        '<button style="color:#fff;cursor:pointer;" class="{myclass}">{caption}</button>',
        '</div></td>',
        '</tpl></tr></table>');


    var htmlApplied = myTpl.apply(data);


    this.items = [{
        xtype: 'panel',
        html: htmlApplied,
        scope: me,
        listeners: {
            el: {
                delegate: 'button',
                click: function(clickcmp, button) {
                    console.log(clickcmp);
                    console.log(button);

                    switch (button.className) {
                        case 'dashboard':
                            this.fireEvent('menuload');


                            break;
                        case 'clients':
                            //alert('clients');
                            break;

                    }

                }
            }
        }
    }]

    this.addEvents({
        menuload: true
    });
}

---

假设

选择器

与您上面添加的组件代码匹配，您缺少的是侦听器上的

范围

。默认情况下，范围将默认为内部面板。

scope:me

需要进入el块内部：

el: {
    scope: this,
    delegate: 'div'
}

el: {
    scope: this,
    delegate: 'div'
}