Question

我有一个对象数组，我使用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
    });
}

控制器

Ext.define("Something.Control", {

     extend: 'Ext.app.Controller',

     refs: [],

     init: function() {
         this.control({
             'selector': {
                 menuload: this.activateMenu
             }
         });
     },

     activateMenu: function() {

     }

 });

Answer 1

假设selector与您在上面添加的组件代码相匹配，那么您缺少的是侦听器上的scope。默认情况下，范围将默认为内部面板。 scope: me需要在el区域内进行：

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

EXTJS使用tpl将fireEvent添加到动态创建的元素中

1 个答案: