如何將單擊事件處理程序添加到 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而不是組合框。 這樣您就可以訪問實際列表而不是整個組合框。

其次，看看 事件偵聽器的一般 配置。 您需要使用 options 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');
                        }
                    }
                }
            }