在显示字段列表模板中打开 url

Question

在示例中，如果我单击任何模板项，则会触发单击事件并始终打开 window 并加载 url。

我需要建立一个条件 select 只有 url；并且仅当单击 url 时， window 才应打开并加载 de url 。

var cars = 'car - Fiat, country - Italy, site - https://www.sencha.com/';

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 450,
    height: 200,
    bodyPadding: 10,
    title: 'Template',
    items: [{
        xtype: 'displayfield',
        fieldLabel: 'Cars',
        name: 'cars',
        renderer: function (value, field) {
                if (value && value.indexOf(',') > -1) {
                    this.rndTpl = this.rndTpl || new Ext.XTemplate('<div style = "line-height: 150%;' +
                        'margin-left: -25px; margin-top: -12px; cursor: pointer;">' +
                        '<ul><li>{[values.cars.replace(/,/g, "<li/>")]}</li></ul>' +
                    '</div>');

                return this.rndTpl.apply({
                    cars: value
                });
            } else {
                return value;
            }
        },
        listeners: {
            render: function(field, eOpts) {
                field.setValue('car - Fiat, country - Italy, site - https://www.sencha.com/')
            },
            change: function(field){
                   var stringValues = field.value;

                   if(stringValues && (stringValues !== '' ||  stringValues !== null)){

                       var arrayValues = stringValues.split(',');

                       arrayValues.map(function(item){
                         var typeValue =  item.indexOf('site');

                        if(typeValue > -1){
                             var value = item.substring(item.indexOf('-') + 1);

                            field.getEl().on('click', function () {
                                 window.open(value, '', false);
                            });

                        }else{
                            return false;
                        }
                    });
                }
           }
         }
     }]

  });

FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/2ii0

Answer 1

所以我分叉了你的 fiddle 并更改了 click 事件函数。我正在获取单击元素的内容并检查它是否是 url，这里是 FIDDLE

在显示字段列表模板中打开 url

open a url in a displayfield list template

templates

extjs

extjs5