How to Make my Label as the Hyperlink in Sencha EXT JS

Question

Can any one please help to make my label as hyperlink in Sencha EXT JS.

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

Here is a solution of your problem: [hyperlink in Sencha EXT JS]: how to create hyper link in extjs4?

or you can add new event for your label:

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

edited May 23 '17 at 11:53

Community

1
1

answered Aug 27 '13 at 05:59

Nail Shakirov

654
1
8
17

That doesn't make it a hyperlink – Ruan Mendes Aug 27 '13 at 06:35
1

It should work, I update my answer, first you make your link clickable and after just add realization into your function like in my code. With css you can make your label underlined and change text color. – Nail Shakirov Aug 27 '13 at 07:03
1

But it still won't let me right click and open in a new tab, or let me just drag it to another window. My point is that it's not a hyperlink, it's a workaround. See my answer – Ruan Mendes Aug 27 '13 at 18:29

Ruan Mendes · Accepted Answer · 2013-08-27T18:36:07.680

1

You can just tell the fieldLabel to be a link 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
    }
});

edited Aug 27 '13 at 18:36

answered Aug 27 '13 at 18:30

Ruan Mendes

90,375
31
153
217

score 1 · Answer 3 · answered Nov 21 '16 at 10:33

Two ways:

//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'
   }
}

You can see my example here https://fiddle.sencha.com/#view/editor&fiddle/1kqh and inspect the differents.

Evgeni Nabokov · Answer 4 · 2015-01-26T16:09:48.913

As a plugin:

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

Use:

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

How to Make my Label as the Hyperlink in Sencha EXT JS

4 Answers4