Question

我可以为这样的组件的'el'元素添加一个监听器：

Ext.widget('component',{
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the component
            fn: function(){ console.log('you clicked the el'); }
        }
    }
}

但是我想在这个组件的tpl中添加更多元素并监听它们的点击次数。在上面的示例中，我想使用自定义元素'el'代替'awesomelink'。如何从侦听器配置中引用tpl中的元素？

这是一个未完成的例子：

Ext.widget('component',{
    tpl : '<div>{content}<a class="awesomelink">click this awesome link</a></div>',
    data:{content:'something'},
    listeners: {
        click: {
            element: 'awesomelink', // this doesn't mean anything 
            fn: function(){ console.log('you clicked the awesomelink'); }
        }
    }
}

我假设我需要在组件上使用awesomelink属性 - 但这与tpl有什么关系？

Answer 1

使用事件委托：

listeners: {
    afterrender: function(c) {
        c.getEl().on('click', function(e, t) {
            console.log(t);
        }, null, {delegate: '.awesomelink'});
    }
}

Answer 2

element配置需要组件上的属性的名称，该组件包含对DOM元素的引用，您要在其中添加侦听器（请参阅{{3} }）。

这就是为什么你可以使用“el”，因为所有组件都有这个属性，但不是“awesomelink”（除非你自己添加该属性）。

但是，如果单击该元素的子节点，组件底层元素上的click事件也将触发，因此您只需检查目标元素是否是侦听器中的链接：

listeners: {
    click: {
        element: 'el',
        fn: function(e, t) {
            if (Ext.get(t).hasCls('awesomelink')) {
                console.log('you clicked the awesomelink');
            }
        }
    }
}

如何向ExtJS组件tpl添加元素，以便我可以在侦听器配置中引用它们

2 个答案: