extjs - Multiple delegations for click event

Question

How do I make it so that I can have multiple delegations? The code below is the one I attempted, but it didn't end up working.

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

        }
    }]
  }

I also tried the following with no success:

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

But neither method seemed to work. Thoughts and/or help on how to get this to function properly?

EDIT: As asked, here is my combobox code:

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

What exactly are you trying to achieve? Also pls include code for your view, so it's clear what's the elements hierarchy you have. — sha, Jun 18 '13 at 21:32
I just put up my combobox code. In essence I want the 1st 2 buttons that I create to have different processes. I'm doing it this way rather than adding it into the store as the data doesn't make sense to be in the store as it's just procedural. — Aram Papazian, Jun 18 '13 at 21:38
Still not clear. You have a combobox. And you need to handle when user selects something in this combobox, right? — sha, Jun 18 '13 at 21:41
Yes. If you look at the listConfig parameter you will see I have a tpl for how the list is to be created. Before I do a tpl for loop I input 2 divs that get added to the drop down. Normally if it's just 1 div I use the listener and I can make it delegate to my added item and be done with it, but now I need to be able to differentiate between the two and can't see how to delegate different tasks to different items. — Aram Papazian, Jun 18 '13 at 21:43
I think your main problem here - you're trying to configure delegates at the time when your elements (divs) are not created. You need to wait for either combobox `render` event, or event later for `expand` event and only then - drill down for rendered divs and attach event handlers to them. — sha, Jun 18 '13 at 21:52
nah, that's not the case cause when I only have 1 element it works perfectly. I'm just wanting to know how to expand it to 2 elements. — Aram Papazian, Jun 18 '13 at 21:55
You don't need two for your task = you just need to recognize which button was clicked - check either class or element Id for that. — sha, Jun 18 '13 at 21:57
Right, but how would I do that... If I setup just one delegation I can give both of those elements the same idea and then a secondary id/class in order to differentiate, but I can't tell where in the returned elt (cmp in the case above) that I could differentiate between the two. I tried to get id/class, but nothing seems to work.... — Aram Papazian, Jun 18 '13 at 21:58
Try to log `cmp` that you're receiving inside handler. You can also add custom fields/tags - like name/data etc. Which will not affect your rendering but you will be able to retrieve it later. — sha, Jun 18 '13 at 22:00
I did try logging cmp and don't see any of the parameters..... There's a reason I asked the question =P cmp didn't seem to be returning any viable information and I couldn't find any additional documentation. cmp seems to be the event and normally it shows what was clicked, but since the dom is being modified the item getting clicked isn't the item that I had set and thus I can't seem to differentiate between the two still =/ — Aram Papazian, Jun 18 '13 at 22:02
Can you try to create fiddle out of it? Should not be complicated, but I think it will be easy to help you. — sha, Jun 18 '13 at 22:05
That should be it: http://jsfiddle.net/nypSD/ (Took a while as I'm building in Architect so I'm not used to creating actual code through ExtJS, but it should be close enough to the real thing) — Aram Papazian, Jun 18 '13 at 22:16

score 3 · Accepted Answer · edited Mar 12 '15 at 21:03

3

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

a would contain div that being clicked.

Check documentation for click event - http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.dom.Element-event-click

Second argument would container HTML target.

edited Mar 12 '15 at 21:03

Mr. Polywhirl

42,981
12
84
132

answered Jun 18 '13 at 22:38

sha

17,824
5
63
98

Why did you include `delegate`? I can't find this in the documentation. – Mr. Polywhirl Mar 12 '15 at 20:48
1

I included `delegate` because original question contained that :) (I think... that was 1.5 years ago) – sha Mar 12 '15 at 20:53
Thanks, looks like that option is no longer available in Ext JS 5. [Ext.mixin.Observable-method-addListener options](http://docs-origin.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.mixin.Observable-method-addListener). I think they renamed it to `element`. I will note this. – Mr. Polywhirl Mar 12 '15 at 20:57
"delegate" - if I remember, correctly - is terminology from the .Net approach to event handling – Thomas Apr 27 '15 at 14:49

extjs - Multiple delegations for click event

1 Answers1