Как обернуть ссылкой произвольный элемент в UI?

Дмитрий, посмотрите в сторону className: "Terrasoft.Hyperlink",

(https://academy.terrasoft.ru/jscoresdk/#!/api/Terrasoft.controls.Hyperl…)

Коновалов Игорь,

Спасибо за ответ. Я пробовал использовать этот компонент, но почему-то не рендерится вложенная картинка. Как я понимаю, проблема в том, что этот компонент не может содержать другие компоненты (как Container).

Есть идея переопределить шаблон контейнера и добавить туда тег <a>, но никак не получается прописать туда href из аттрибута карточки. Кто-нибудь знает как это сделать ?

Дмитрий, я вижу тут такой выход - через ExtJS получить обьект и добавить к нему событие на клик.

Лучше понятно на примере, пусть нам необходимо в карточке контакта добавить обработку события нажатия на фотографию контакта с последующим открытием произвольно заданной ссылки.

Делать это необходимо, когда сущность уже полностью проинициализирована, то есть переопределим onEntityInitialized, тогда обработку можно добавить примерно так:

onEntityInitialized: function() {
  //обязательно вызываем родителя
  this.callParent(arguments);
  //получаем элемент-фотографию контакта
  var imgElement = Ext.select("div.ts-image-edit-inner-container img").first();
  //добавляем обработчик событие клика на фотографию
  imgElement.on("click", function() {
    window.open(resources.localizableStrings.UsrImgLink).focus();
  });
}

UsrImgLink - это локализуемая строка клиентской схемы, в которой можно хранить ссылку. Либо просто создать переменную или передать ее в текстовом виде.

Если такой вариант не подходит, то можно именно "обернуть" картинку ссылкой (т.е. тегом <a>). Тогда будет что-то примерно такого:

onEntityInitialized: function() {
  this.callParent(arguments);
  //получаем элемент-фотографию
  var imgElement = Ext.select("div.ts-image-edit-inner-container img").first();
  //получаем контейнер в котором находится изображение
  var imgContainer = Ext.select("div.ts-image-edit-inner-container");
  //получаем HTML разметку элемента "изображение"
  var imgHTML = imgElement.dom.outerHTML;
  //оборачиваем изображение ссылкой
  var wrappedImageLink = "<a href=" + resources.localizableStrings.UsrImgLink + ">" + imgHTML + "</a>"
  //удаляем существующее изображение
  imgElement.remove();
  //добавляем это изображение, обернутое в ссылку
  Ext.DomHelper.append(Ext.get(imgContainer).first(), wrappedImageLink)
}

В этом случае в разметке все будет хорошо, но, например, в карточке контакта при клике ссылка открываться не будет, но если открыть в новой вкладке, то все ок.

Может есть и более изящные варианты, это первые пришедшие в голову, попробуйте, должно получится.