如何在 ExtJS 标签内创建一个 hyper link

Question

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

A license is required to enable the feature. See Licenses for more information.

我正在尝试使用 ExtJS 标签组件，但是我不知道如何在标签文本中创建 link。一般问题是 link 应该有 onclick Javascript 处理程序。

我应该使用 Label 的 html 选项来设置普通 html 文本和 Javascript 处理程序，还是有其他方法？

Answer 1

我认为使用 html 选项会更好，因为您还需要渲染 link。至于事件处理，一种方法是附加一个事件处理程序并检查 dom 中的目标 node 是否是该锚点。

请查看此 FIDDLE 进行说明。

这是一个示例实现：

    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');
                        }
                    }
                }
            }
        }]

    });

Answer 2

您可以使用 html 配置来创建 link 和事件委托来添加点击侦听器。

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'
    }
});

另见 this fiddle。

选项在 documentation:

中解释

element : String

This option is only valid for listeners bound to Components. The name of a Component property which references an element to add a listener to.

This option is useful during Component construction to add DOM event listeners to elements of Components which will exist only after the Component is rendered.

[...]

delegate : String (optional)

A simple selector to filter the event target or look for a descendant of the target.

The "delegate" option is only available on Ext.dom.Element instances (or when attaching a listener to a Ext.dom.Element via a Component using the element option).

[...]

请注意，我使用 Ext.Component 而不是 Ext.Label。如果您确实需要 Ext.Label 的功能（它旨在与表单字段结合使用），您可以更改它。

如何在 ExtJS 标签内创建一个 hyper link

How to create a hyper link inside ExtJS label

javascript

extjs