ComboBox custom template - how do I attach a click handler

[jmartinez40]

I have constructed a ComboBox with a custom Template. Inside this template I have anchor links for which I need to handle the 'click' event. I don't know if this is the best way to implement such functionality, so if there is a better way I am all ears.
ComboBox-Tpl.jpg

[mitchellsimoens]

cmp.mon(cmp.el, {
    scope : cmp,
    delegate : 'a.iol-combo-list-item-action', //I think I have that class right
    click : function() {
        console.log(arguments);
    }
});

[jmartinez40]

Mitchell,

I appreciate your prompt response. Unfortunately this does not get me there - my fault as I did not provide the necessary details. (

I am in the process of migrating from 3.4 to 4.0.

Basically I am working with a ComboBox with queryMode='remote', minChars=2, and queryDelay=500 which means the list gets updated often. As a matter of efficiency I do not want to bind a 'click' handler to all anchors on the list at once. I want to bind handlers only to the row currently highlighted - most of the time users click an item close to the top. Below is my In 3.4 code, which does what I need:

    // Ext JS 3.4 code...

        onComboBoxAfterRender: function (combo) {
            combo.focus();
            combo.view.on('selectionchange', this.onComboBoxViewSelectionChange, this);
        },
        onComboBoxViewSelectionChange: function (view, selections) {
            if (selections.length > 0) {
                this.searchHelperDisplayField.setValue(this.viewReportText);
                var list = Ext.DomQuery.select(".iol-combo-list-item-action", selections[0].id);
                for (var i = 0; i < list.length; i++) {
                    var el = Ext.get(list[i].id);
                    el.un('click', this.onComboBoxActionClick, this);
                    el.on('click', this.onComboBoxActionClick, this, { single: true });
                }
            }
        }

As you can see after the ComboBox has been rendered, I am relying on being able to bind to the 'selectionchange' event on the underlying view (combo.view.on('selectionchange') which allowed me to work on one row at the time. Ext JS 4.0.7 object model does not seem to expose the underlying list (picker - Ext.view.BoundList). Is there a way to replicate the 3.4 behavior on 4.07?

Ok, let's assume worst-case-scenario, I cannot bind one row at the time because I cannot access the underlying list object. I still need to bind to the list everytime it is created- and by looking at the Ext JS source code (ComboBox.js and Picker.js) I see the list is not created until after the ComboBox.expand event. I tried to bind from the 'expand' event, as illustrated in the code below, but the query returns empty since the list's DOM has not been rendered.

    // Ext JS 4.07 code...

    onIndexComboExpand: function (combo, options) {
        Iol.log('onIndexComboExpand');
        var list = Ext.ComponentQuery.query("iolcoresearchcombobox .iol-combo-list-item-action");
    },

I hope I am making sense.

Thank you in advance,
Miguel

[skirtle]

You should be able to specify listeners in the listConfig of the combobox. They will then apply to the drop-down.

I think you've misunderstood Mitchell's example. He's using event delegation. That involves attaching a single listener to the whole list. The delegate setting then ensures that your listener only fires when a suitable element is clicked. Using this technique there's no need to bind to each row in the list, in fact it will even cope when the contents of the list changes.

I haven't tried it but you could probably do something like this...

Ext.create('Ext.form.field.ComboBox', {
    ...
    listConfig: {
        listeners: {
            el: {
                click: {
                    delegate: 'a.iol-combo-list-item-action',
                    fn: function(ev, anchor) {
                        ...
                    }
                }
            }
        }
    }
});

Check out the docs for these settings for more info.