如何在 Sencha EXT JS 中将我的标签设为超链接

Posted 2023-02-26

【中文标题】如何在 Sencha EXT JS 中将我的标签设为超链接

【英文标题】：How to Make my Label as the Hyperlink in Sencha EXT JS

【发布时间】：2013-08-27 05:36:45

【问题描述】：

谁能帮我在 Sencha EXT JS 中将我的标签设为超链接。

【参考方案1】：

你可以告诉 fieldLabel 是一个链接http://jsfiddle.net/EsppR/1/

Ext.create('Ext.form.Panel', 
    title: 'Contact Info',
    renderTo: Ext.getBody(),
    items: 
        xtype: 'textfield',
        name: 'name',
        fieldLabel: '<a href="http://www.google.com">Name</a>',
        allowBlank: false  // requires a non-empty value
    
);

【参考方案2】：

这是您问题的解决方案：[Sencha EXT JS 中的超链接]：how to create hyper link in extjs4?

或者您可以为您的标签添加新事件：

Ext.onReady(function() 

    var yourLabel = new Ext.form.Label(
        id:'yourLabel',
        text: 'http://your-link-here.com',
        renderTo : document.body                                

    );

    Ext.getCmp('yourLabel').getEl().on('click',function()
        window.open("http://your-link-here.com");
    );
);

【讨论】：

这不是超链接

它应该可以工作，我更新我的答案，首先你让你的链接可点击，然后像我的代码一样将实现添加到你的函数中。使用 CSS，您可以为标签添加下划线并更改文本颜色。

但它仍然不允许我右键单击并在新选项卡中打开，或者让我将其拖到另一个窗口。我的观点是，它不是超链接，而是一种解决方法。看我的回答

【参考方案3】：

作为插件：

Ext.define('YourCompany.plugins.LinkedLabel', 
    extend: 'Ext.AbstractPlugin',
    url: undefined,
    init: function (cmp) 
        this.setCmp(cmp);
        cmp.beforeLabelTextTpl = '<a href="' + url + '">';
        cmp.afterLabelTextTpl = '</a>';
    );
);

用途：

    xtype: 'textfield',
    fieldLabel: 'Linked label',
    plugins: Ext.create('YourCompany.plugins.LinkedLabel',  url: '/yourUrl' )

【参考方案4】：

两种方式：

//1st - set html for label

   xtype: "label",
   html: "bla bla?! <a href='http:/\tiny.cc/snir' target='_blank'>Press This Link!!!</a><br>"
,

//2nd - create a new component

   xtype: 'component',
   autoEl: 
      tag: 'a',
      href: 'http:\/tiny.cc/snir/',
      target: '_blank',
      html: 'tiny.cc/snir'
   

您可以在此处查看我的示例 https://fiddle.sencha.com/#view/editor&fiddle/1kqh 并检查不同之处。