extjs - 单击事件的多个委派

时间:2013-06-18 21:25:02

标签: javascript events extjs delegates extjs4.2

如何制作以便我可以拥有多个代表团?下面的代码是我试过的代码,但它并没有最终起作用。

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
    }
}
},

1 个答案:

答案 0 :(得分:3)

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目标。