如何在 SubTpl 内容之后为组合框配置点击事件监听器

Question

这里我使用的是 Ext JS 5.

我的用例是在组合框输入框下方显示一些文本。因此，我使用了组合框的“afterSubTpl”配置并显示了所需的文本。现在我必须在用户单击上面指定的文本时引发一个事件。

组合框在 Ext JS 中不应该有点击事件。如何为此配置点击事件监听器？

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    afterSubTpl: '<div>My Custom Text</div>',
    renderTo: Ext.getBody()
});

需要为红色边框显示的文本配置点击事件。

Answer 1

对于您的代码，您可以这样做：

listeners: {
    afterrender: function(component) {
        var myDiv = component.getEl().down('div#myDiv');
        myDiv.on('click', function() {
            console.log('Clicked!');
        }); 
    }
}

Working fiddle

Answer 2

您可以将 class 添加到 div，然后在 click 事件中使用 element 和 delegate，例如：

Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        afterSubTpl: '<div class="foo">My Custom Text</div>',
        renderTo: Ext.getBody(),
        listeners: {
            click: {
                element: 'el',
                delegate: '.foo',
                fn: function(){
                    console.log('click');
                }
            }
        }
    });

https://fiddle.sencha.com/#fiddle/15r8

如何在 SubTpl 内容之后为组合框配置点击事件监听器

How to configure click event listener for combobox afterSubTpl content

combobox

extjs

extjs5