extjs - 点击事件的多个委托答案

【问题标题】：extjs - Multiple delegations for click eventextjs - 点击事件的多个委托
【发布时间】：2013-06-18 21:25:01
【问题描述】：

如何才能让我拥有多个委托？下面的代码是我尝试过的，但它最终没有工作。

listeners: {
    el: [{
        delegate: '.my-boundlist-item-menu',
        click: function(cmp) {
            console.log('1');

        }
    },{
        delegate: '.my-boundlist-item-menu-2',
        click: function(cmp) {
            console.log('2');

        }
    }]
  }

我也尝试了以下方法，但没有成功：

listeners: {
   itemclick: function(record, item, index, e, eOpts){
                    if (eOpts.getTarget('.my-boundlist-item-menu')) {
                        console.log('1');
                    } else if (eOpts.getTarget('.my-boundlist-item-menu-2')) {
                        console.log('2');
                    } else {
                        console.log('3');
                    }
                }
  }

但这两种方法似乎都不起作用。有关如何使其正常运行的想法和/或帮助？

编辑：按照要求，这是我的组合框代码：

{
xtype: 'combobox',
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="FirstName">',
'{FirstName}',
'</tpl>',
' ',
'<tpl if="LastName">',
'{LastName}',
'</tpl>',
'</tpl>'),
x: 10,
y: 60,
listConfig: {
    tpl: '<div class="my-boundlist-item-menu" style="cursor:pointer;padding:2px;border:1px dotted #fff" onmouseover="this.className=\'my-boundlist-item-menu x-boundlist-item-over\'" onmouseout="this.className=\'my-boundlist-item-menu\'" >Add New Contact</div>'+'<div class="my-boundlist-item-menu-2" style="cursor:pointer;padding:2px;border:1px dotted #fff" onmouseover="this.className=\'my-boundlist-item-menu x-boundlist-item-over\'" onmouseout="this.className=\'my-boundlist-item-menu\'" >Use Myself</div>'+'<tpl for=".">'+'<div class="x-boundlist-item">'+'<tpl if="FirstName">{FirstName} </tpl>'+'<tpl if="LastName">{LastName}</tpl>'+'</div></tpl>',
    listeners: {
        el: [
            {
                delegate: '.my-boundlist-item-menu',
                click: function(cmp) {
                            console.log('1');

                        }
            },
            {
                delegate: '.my-boundlist-item-menu-2',
                click: function(cmp) {
                            console.log('2');

                        }
            }
        ]
    }
},
id: 'end-contact',
fieldLabel: 'Location Contact',
labelWidth: 125,
name: 'idContact',
displayField: 'FirstName',
store: 'ContactStore',
valueField: 'idContact',
listeners: {
    expand: {
        fn: me.onexpandend,
        scope: me
    }
}
},

【问题讨论】：

您到底想达到什么目的？还请包含您的视图的代码，以便清楚您拥有的元素层次结构。
我刚刚提交了我的组合框代码。本质上，我希望我创建的 1st 2 按钮具有不同的过程。我这样做而不是将其添加到商店中，因为数据在商店中没有意义，因为它只是程序性的。
还是不清楚。你有一个组合框。当用户在此组合框中选择某些内容时，您需要处理，对吧？
是的。如果您查看 listConfig 参数，您将看到我有一个关于如何创建列表的 tpl。在我执行 tpl for 循环之前，我输入了 2 个添加到下拉列表中的 div。通常，如果它只有 1 个 div，我会使用侦听器，我可以将其委托给我添加的项目并完成它，但现在我需要能够区分两者并且看不到如何将不同的任务委托给不同的项目。
我认为您的主要问题在这里 - 您正在尝试在未创建元素（div）时配置委托。您需要等待组合框 render 事件，或者稍后等待 expand 事件的事件，然后才可以向下钻取呈现的 div 并将事件处理程序附加到它们。

标签： javascript events extjs delegates extjs4.2

【解决方案1】：

el: {
     delegate: '.my-boundlist-item-menu',
     click: function(cmp, a) {
         console.log('clicked', cmp, a);
     }
}

a 将包含被点击的 div。

检查 click 事件的文档 - http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.dom.Element-event-click

第二个参数是容器 HTML 目标。

【讨论】：

为什么包含delegate？我在文档中找不到这个。
我将delegate 包括在内，因为原始问题包含 :)（我认为……那是 1.5 年前）
谢谢，Ext JS 5 中似乎不再提供该选项。Ext.mixin.Observable-method-addListener options。我认为他们将其重命名为element。我会注意这一点。
“delegate”——如果我没记错的话——是 .Net 事件处理方法中的术语