Javascript 如何在ExtJS标签内创建超链接

在我的ExtJs应用程序中，我需要显示一条带有超链接的消息，如下所示：

启用此功能需要许可证。寻找 更多信息

我试图使用ExtJS标签组件，但是我不知道如何在标签文本中创建链接。一般的问题是链接应该有

onclick

Javascript处理程序

---

我应该使用Label的

html

选项来设置纯html文本和Javascript处理程序，还是有其他方法？

我认为最好使用

html

选项，因为您还需要呈现链接。对于事件处理，一种方法是附加一个事件处理程序，并检查

dom

中的目标

节点是否就是该锚定

请检查此项以获得澄清

下面是一个示例实现：

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title:'Label with link',
        items: [{
            xtype: 'label',
            forId: 'myFieldId',
            html: '<p>This is a test for <a href="#">link</a> in label</p>',
            margin: '0 0 0 10',
            listeners: {
                click: {
                    element: 'el',
                    preventDefault: true,
                    fn: function(e, target){
                        var el = Ext.fly(target);
                        if(el.dom.nodeName === "A"){
                            console.log('Clicked');
                        }
                    }
                }
            }
        }]

    });

Ext.create（'Ext.form.Panel'{
renderTo:Ext.getBody（），
标题：“带有链接的标签”，
项目：[{
xtype:'标签'，
forId:'myFieldId'，
html:“这是对标签中的内容的测试”，
边距：“010”，
听众：{
点击：{
元素：“el”，
默认值：true，
fn：功能（e，目标）{
var el=外部飞行（目标）；
如果（el.dom.nodeName==“A”）{
console.log（'Clicked'）；
}
}
}
}
}]
});
您可以使用配置创建链接和事件委派以添加单击侦听器

Ext.create('Ext.Component', {
    html: 'A license is required to enable the feature. See <a href="#">Licenses</a> for more information.',
    listeners: {
        'click': function() {
            // do stuff
        },
        // name of the component property which refers to the element to add the listener to
        element: 'el',
        // css selector to filter the target element
        delegate: 'a'
    }
});

Ext.create（'Ext.Component'{
html:“需要许可证才能启用该功能。有关详细信息，请参阅。”，
听众：{
“单击”：函数（）{
//做事
},
//引用要向其添加侦听器的元素的组件属性的名称
元素：“el”，
//用于筛选目标元素的css选择器
代表：“a”
}
});

另见

有关选项的说明，请参见：


元素：字符串

此选项仅对绑定到组件的侦听器有效。引用要向其添加侦听器的元素的组件属性的名称

此选项在组件构造期间非常有用，可以将DOM事件侦听器添加到组件的元素中，这些元素只有在呈现组件后才会存在

[……]

委托：字符串（可选）

一个简单的选择器，用于筛选事件目标或查找目标的后代

“delegate”选项仅在Ext.dom.Element实例上可用（或通过使用Element选项的组件将侦听器附加到Ext.dom.Element时）

[……]


注意，我使用了
Ext.Component
而不是
Ext.Label
。如果您确实需要
Ext.Label
的功能（该功能旨在与表单字段结合使用），您只需更改即可。
我喜欢此解决方案。：）+Ext可以使用语法
侦听器：{el:{delegate:'a'，click:handler}}
处理额外的逻辑来注册元素。看见另外，出于浏览器可用性的考虑，我会将真实的url放在href链接中。@rixo您能告诉我这些语法是在哪里提到的吗？谢谢。不，对不起，我找不到。我原以为是的，但显然不是。我一定是在博客上看到的。有一个
元素
选项已经关闭，所以现在官方的方式是
元素：'el'
而不是嵌套的
el
语法。感谢rixo指出这一点，我已经相应地更新了我的答案。