View Full Version : LinkLabel in extjs 4 ?

2 Mar 2012, 10:42 AM
I am looking for a linklabel in extjs... i found xtype: component using autoel.. but i want to set the path to internal file of the solution... (if someone clicks the linklabel , an other window shows)
was there any xtype component which solves my problem ...?

2 Mar 2012, 11:34 AM
It's not really that easy. Ext.form.field.Text extends Ext.form.field.Base. The Base field uses the Labelable mixin to provide the label which uses the labelableRenderTpl

21 Mar 2012, 1:55 PM
I created a container that I added an event to. In that container I added a component with text and a class to make the text look like a link. Not quite a full link label, but it serves the purpose that I needed.

[YourScripts].LinkLabel = Ext.extend(Ext.container.Container, {
initComponent: function ()
var ll = this;

Ext.apply(ll, {
id: ll.configs.id ? ll.configs.id + '_linkLabelContainer' : 'linkLabelContainer'
, width: ll.configs.width ? ll.configs.width : 50
, layout: {
type: 'hbox'
, cls: 'linkLabel'
, items: [
xtype: 'box',
autoEl: {
cls: 'linkLabel'
, html: ll.configs.labelText



, onRender: function ()
var ll = this,


btn = ll.el;

btnListeners = {
scope: ll

btnListeners['click'] = ll.onClick;

ll.mon(btn, btnListeners);

, onClick: function (e)
var ll = this;

ll.fireEvent('click', ll, e);

Call by using the following code.

var llConfigs = {};
llConfigs.id = 'customizeLinkLabel'
llConfigs.width = 200;
llConfigs.labelText = 'Link Label Text';

var customizeLinkLabel = new [YourScripts].LinkLabel({
configs: llConfigs

customizeLinkLabel.on('click', functionToCall, scope);

22 Mar 2012, 7:17 AM
I don't know if I have understand your problem,but this is a little tip to click a link label:

fieldLabel: '<A HREF="link.html">my link</A>',

Hope it helps you.


22 Mar 2012, 7:51 AM
Thank you.. for that tip.. thats exactly what i came up with.....

var linkLabel = new Ext.form.DisplayField({
fieldLabel: '',
value: '<a href="javascript:showWindow()"> ShowWindow </a>'

function showWindow() {

Thank you ..

18 Nov 2012, 12:13 PM
If you type in the items of the panel or w/e you are trying to put the link in "html" followed by the html code you want to use, it works no problem, I.E. for you question:

html: '<A HREF="mylink.html">My Link</A>'

Hope I understood your question correctly and this help!

30 Dec 2012, 2:50 PM

Posting here as thought the question is similar to the one which is being discussed.

I need to create a form panel item like this -

check <a> details</a> for further information.

that is text with in line links is there any easy way in Extjs 4 we can do this.

sorry am new to Extjs.

Thanks in advance.