Results 1 to 5 of 5

Thread: How to display data with a href link in a textfield?

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    28
    Answers
    1

    Default How to display data with a href link in a textfield?

    Hi All,

    I has a textfield and I need to make this data with a link. I have the following code but it always show data twice, one is my with the link and one is default. How do hide or not display the default one? Thanks.

    { xtype: 'textfield',
    name: 'Phone',
    id: 'myPhone',
    label: 'Phone',
    readOnly: true,
    listeners: {
    painted: function(first, second) {
    var phonevalue = Ext.ComponentQuery.query('#myPhone')[0].getvalue();
    this.setHtml (
    '<div>< a href="tel:'+phonevalue+'">'+phonevalue+'</a></div>');
    }
    }
    }

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    You are going to try and show HTML within a text field? You will see the tags, not a link as you are expecting.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    28
    Answers
    1

    Default

    mitchellsimoens: Thank you for your reply. Actually, I have the link. For example, if my Phone="2087162345",

    then I will get

    2087162345 (no link, black font)
    2087162345 (with link, blue font) , if I click here, it can deal to this number as I defined in <a href=....>. or link to a map if my variable is an address.

    My problem is I don't want to have the first line displayed and don't know how to hide this line.

    Any idea and suggestion? Thanks.

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    122
    Answers
    2

    Default

    Hi, I ma interested in both dial link and google map link.
    Could you paste an example if you succeeded ?

    Thanks you

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    28
    Answers
    1

    Default

    Hi Tchinkatchuk,

    Since the textfield doesn't work, I found another way to do the trick.

    I use the XTemplate with the list. Here is the code.

    { xtype: 'list',
    store: 'mystore';
    itemTpl: new Ext.XTemplate('{[this.changePhone(values.myPhone,values.myEmail)]}', {
    changePhone: function (myPhone, myEmail) {
    return '<div class="field" style="..."><span class="label">Phone:<a href="tel:'+myPhone+'">'+myPhone+'></a></div>'+
    '<div class="field" style="..."><span class="label">Email:</span><a href="mailto:'+myEmail+'">'+myEmail+'</a></div>';
    }
    })
    }

    After this, the problem is if phone or email has been clicked, there is a blue border has been drawed because this is kind of a list with only one item, what I had done with it is to use Sencha-Theme to make this list to have white color when it has been selected. It will work fine then.

    Map is the same thing.

    Good luck.

    Edward

    .field
    {background:#FFFFFF;font-size: 100%;color:black;text-indent: -100px;border-bottom: 1pxsolid#DDD;padding:0.4em0.4em0.4em100px;}.field .label {display: inline-block;color:#666;text-align:right; text-transform:capitalize; width: 100px;padding-right:1em;
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •