如何将单击事件处理程序添加到 Ext JS 选择器子元素？

Question

I want to be able to add a link into the combo box drop down list that does something.

I did this by changing the template. However adding a click event listener doesn't work, does anyone know why?

 items: [{ xtype: 'combobox', fieldLabel: 'Combo with extra option', store: { fields: ['value', 'display'], data: [ { value: 1, display: 'First' }, { value: 2, display: 'Second' } ] }, valueField: 'value', displayField: 'display', tpl: Ext.create('Ext.XTemplate', '<div style="background-color: lightblue;" class="searchItem">Search</div>', '<ul class="x-list-plain">', '<tpl for=".">', '<li role="option" class="x-boundlist-item">{display} - {value}</li>', '</tpl></ul>' ), listeners: { boxready: function(field) { var picker = field.getPicker(); picker.on('boxready', function() { var searchItem = Ext.get(this.getEl().query('.searchItem')[0]); searchItem.on('click', function() { alert('test'); });//this doesn't do anything }) } }

Answer 1

you need to add a listener configuration to your listConfig instead of the combobox. That way you access the actual list instead of the entire combobox.

Secondly, have a look at the general configuration for an event listener . You need to make use of the options element and delegate .

The element option requires an Ext.dom.Element to add a listener to. In your case, you can use el as value to add the entire element.

The delegate option requires a selector like div.searchItem . Putting this all together would create the following listConfig :

            listConfig: {
                listeners: {
                    click: {
                        element: 'el',
                        delegate: 'div.searchItem',
                        fn: function (event, target) {
                            alert('test');
                        }
                    }
                }
            }