1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    12
    Vote Rating
    0
    nihar1987 is on a distinguished road

      0  

    Default Answered: LinkLabel in extjs 4 ?

    Answered: LinkLabel in extjs 4 ?


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

  2. I don't know if I have understand your problem,but this is a little tip to click a link label:

    Code:
    fieldLabel:  '<A HREF="link.html">my link</A>',
    Hope it helps you.

    Bye

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Answers
    3518
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    21
    Vote Rating
    0
    gouber80 is on a distinguished road

      0  

    Default nihar1987 - This might work for you.

    nihar1987 - This might work for you.


    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.

    Code:
    [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.

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

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    Milano
    Posts
    98
    Answers
    1
    Vote Rating
    0
    grubby69 is on a distinguished road

      0  

    Default


    I don't know if I have understand your problem,but this is a little tip to click a link label:

    Code:
    fieldLabel:  '<A HREF="link.html">my link</A>',
    Hope it helps you.

    Bye

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    12
    Vote Rating
    0
    nihar1987 is on a distinguished road

      0  

    Default


    Thank you.. for that tip.. thats exactly what i came up with.....
    Code:
    var linkLabel = new Ext.form.DisplayField({
        fieldLabel: '',
        value: '<a href="javascript:showWindow()"> ShowWindow </a>'
    });
    Code:
    function showWindow() {
        win.show();
    }
    Thank you ..

  7. #6
    Sencha User
    Join Date
    Nov 2012
    Posts
    1
    Vote Rating
    0
    shifke is on a distinguished road

      0  

    Default Easy way to add HTML

    Easy way to add HTML


    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!

  8. #7
    Sencha User
    Join Date
    Dec 2012
    Posts
    1
    Vote Rating
    0
    vasanth4 is on a distinguished road

      0  

    Default Text with in line links

    Text with in line links


    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.