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

Question

我希望能够向组合框下拉列表中添加一个执行某些操作的链接。

我通过更改模板来做到这一点。但是添加点击事件监听器不起作用，有人知道为什么吗？

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

您需要将监听器配置添加到您的 listConfig而不是组合框。这样您就可以访问实际列表而不是整个组合框。

其次，看看一般configuration for an event listener 。您需要使用选项 element 和 delegate。

element 选项需要 Ext.dom.Element 来添加监听器。在您的情况下，您可以使用 el 作为值来添加整个元素。

delegate 选项需要一个像 div.searchItem 这样的选择器。将所有这些放在一起将创建以下 listConfig:

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