PDA

View Full Version : LinkLabel in extjs 4 ?



nihar1987
2 Mar 2012, 10:42 AM
Hi,
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 ...?

mitchellsimoens
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

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


ll.addEvents('click');


ll.callParent(arguments);
}


, onRender: function ()
{
var ll = this,
btn,
btnListeners;


ll.callParent(arguments);


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

grubby69
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.

Bye

nihar1987
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() {
win.show();
}


Thank you ..

shifke
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!

vasanth4
30 Dec 2012, 2:50 PM
Hi,

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.