href link on displayfield value

Question

My app has a form for display data, with a displayfield. This displayfield show web sites links and the value is a href link.

I am struggling to properly configure the href.

Can you help me, please?

{
  xtype: 'displayfield',
  fieldLabel: 'Web/URL',
  name: 'URL',
  autoEl: {
          tag: 'a',
          href: '',
       // href: '<a href="'+ this.value +'">'+ this.value +'</a>',
          target: '_blank'
  }
}

EDITED:

Fiddle: https://fiddle.sencha.com/#fiddle/13u0

Answer 1

It's better to use 'click' listener event rather than using autoEl. You can add fieldCls config in order to style for the value.

items: [{ 
    xtype: 'displayfield', 
    fieldLabel: 'Displayfield',
    labelWidth: 100,
    name: 'link',
    value: 'http://stackoverflow.com',
    fieldCls: 'style-for-url', // class for url
    listeners: {
        afterrender: function(view) {
            // Listener for onclick
            view.getEl().on('click', function() {
                window.open(view.value);
            })
        }
    }
}]

Answer 2

我认为，您必须像这样编写href属性，因为您已经指定它是一个“ a”标签。

href: this.value