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

In my ExtJs app I need to show a message with a hyperlink like the following:

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

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

启用该功能需要许可证。有关详细信息,请参阅许可证。

I'm trying to use ExtJS Label component, however I have no idea how to create a link inside the label's text. The general problem is the link should have onclick Javascript handler.

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

Should I use Label's html option to set both plain html text and Javascript handler, or is there another approach?

我应该使用Label的html选项来设置普通的html文本和Javascript处理程序,还是有另一种方法?

2 个解决方案

#1

You can use the html config for creating the link and event delegation for adding the click listener.

您可以使用html配置创建链接和事件委派以添加单击侦听器。

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

Also see this fiddle.

也看到这个小提琴。

The options are explained in the documentation:

选项在文档中说明:

element : String

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.

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

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.

在Component构造期间,此选项非常有用,可以将DOM事件侦听器添加到Component的元素,这些元素仅在呈现Component之后才存在。

[...]

delegate : String (optional)

delegate:String(可选)

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).

“delegate”选项仅在Ext.dom.Element实例上可用(或者使用element选项通过Component将侦听器附加到Ext.dom.Element时)。

[...]

Note that I used Ext.Component instead of Ext.Label. In case you really need the functionality of Ext.Label (it's intended for usage in combination with form fields) you can just change that.

请注意,我使用Ext.Component而不是Ext.Label。如果你真的需要Ext.Label的功能(它打算与表单字段结合使用),你可以改变它。

#2

I think it'll be better to use the html option since you need to render a link as well. As for the event handling, one way is to attach an event handler and check if the target node in the dom is that anchor.

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

Please check this FIDDLE for clarification.

请查看此FIDDLE以获得澄清。

Here is a sample implementation:

这是一个示例实现:

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

    });

#1