为 Link 次点击创建简单监听器

Question

我有一个 fiddle here.

仍在尝试弄清楚 Ext JS。单击 link 时如何触发单击事件？应该是世界上最简单的事情吧？当点击 a 而不是 span 时，警报应该出现。此外，如果可能的话，我想将附加侦听器的那段代码移动到 ViewController 中。

var container = Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    html: '<div><a class="test">test....</a><br><br><br><span>some text</span></div>',
    listeners: {
        click: function(){
            Ext.Msg.alert('I have been clicked!')  
        }
    }
});


container.down('a.test').on('click', function(){ 
    this.fireEvent('click', container); 
}, container);

我试图按照 "Listening for DOM Events" 部分中的 instructions here 进行操作。

此外，一旦我的处理程序函数 returns，我不希望任何其他处理程序可能触发..所以我猜相当于 jQuery preventDefault.

Answer 1

你快到了。

您需要在监听器中使用 getEl() 来检索实际的 DOM 元素，以便将监听器附加到它。

container.getEl().down('a.test').on('click', function(){ 
this.fireEvent('click', container); 
    }, container);

Answer 2

您也可以简单地使用 listeners，例如：

listeners: {
    click: {
        element: 'el',
        delegate: 'a',
        fn: function() {
            Ext.Msg.alert('I have been clicked!')
        }
    }
}

基于您的工作示例：https://fiddle.sencha.com/#fiddle/v72

（delegate可以是任意选择器）

为 Link 次点击创建简单监听器

Create Simple Listener for Link Clicks

javascript

extjs

dom-events

extjs6