LinkLabel in extjs 4 ?

[nihar1987]

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]

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]

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]

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]

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]

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]

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.