CODEWITHSUNDEEP
extjs
Venkat
Venkat

Reputation: 63

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

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

Upvotes: 2

Views: 9502

Answers (4)

snir
snir

Reputation: 3127

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.

Upvotes: 1

Evgeni Nabokov
Evgeni Nabokov

Reputation: 2571

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

Upvotes: 0

Ruan Mendes
Ruan Mendes

Reputation: 92274

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

Upvotes: 1

Nail Shakirov
Nail Shakirov

Reputation: 654

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

Upvotes: 1

Related Questions