Question

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

启用此功能需要许可证。请参阅Licenses 更多信息。

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

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

Answer 1

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

请查看此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配置创建用于添加点击侦听器的链接和事件委派。

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

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

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

[...]



委托：字符串（可选）

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

＆＃34;代表＆＃34; option仅在Ext.dom.Element实例上可用（或者使用element选项通过Component将侦听器附加到Ext.dom.Element时）。

[...]

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

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

2 个答案: