Как добавить обработчик события click в дочерний элемент Ext JS picker? - PullRequest
Новая
       4

Как добавить обработчик события click в дочерний элемент Ext JS picker?

0 голосов
/ 29 января 2020

Я хочу иметь возможность добавить ссылку в выпадающий список со списком, который что-то делает.

Я сделал это, изменив шаблон. Однако добавление прослушивателя событий щелчка не работает, кто-нибудь знает почему? 

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

1 Ответ

1 голос
/ 29 января 2020

вам нужно добавить конфигурацию слушателя к вашему listConfig вместо комбинированного списка. Таким образом, вы получаете доступ к фактическому списку, а не ко всему списку.

Во-вторых, взгляните на общую конфигурацию для прослушивателя событий . Вам нужно использовать опции 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');
                        }
                    }
                }
            }
...