Question

这里我使用的是Ext JS 5。

我的用例是在组合框输入框下面显示一些文字。所以，我使用＆＃34; afterSubTpl＆＃34;组合框并显示所需的文本。现在，当用户点击上面指定的文本时，我必须提出一个事件。

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

// 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

您可以在div中添加一个类，然后在element事件中使用delegate和click，例如：

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

Answer 2

如果是您的代码，您可以执行以下操作：

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

Working fiddle

如何为combobox afterSubTpl内容配置click事件侦听器

2 个答案: