A formPanels textfield value should be a href link

Question

this is my textfield in my formpanel:

{
    xtype: 'textfield',
    fieldLabel: 'Homepage',
    name: 'homepage',
    tabIndex: 4,
    padding: '10'
}

I want the loaded value which is displayed to be a clickable link.

EDIT:

because webpages without "http://" at the beginning won't display in the new tab, i changed the solution a little bit like this:

listeners: {
     render: function (field) {
        this.getEl().on('click', function (e, t, eOpts) {
           var url = e.target.value;
           if (url != '') {
             if (url.indexOf("http://") != -1) {
               var win = window.open(url, '_blank');
             } else {
               var win = window.open('http://' + url, '_blank');
             }
           win.focus();
           }
        }
      }
}

Answer 1

There is no way you can achieve what you desire.For 'link' you have to use another component may be a label with a link.But with some trick you can make the value in a textfield appear as a link.For that you can do something like this:

{
    xtype: 'textfield',
    name: 'name',
    id:'link',
    fieldStyle: 'color: blue; text-decoration:underline; cursor:pointer',
    listeners: {
        render: function (field) {
            this.getEl().on('click', function (e, t, eOpts) {
                console.log(e);
                //here you need to do some hack around to restrict changing href,only on click of input in the textfield.Could not achieve that,but tried to give some idea.
                var url = e.target.value;
                if(url != ''){
                    window.location="";
                }
            });
        }
    }
}

Hope this helps you :-)