ExtJS 图片添加点击跳转到空白页展示功能
在给定的代码中,可以在点击图片时打开一个新的空白页面,并在新页面中展示图片。以下是实现这个功能的代码:
_getImageShowPanel: function (images, title) {
return {
title: title,
xtype: "fieldset",
border: 0,
height: 130,
anchor: '100%',
items: [{
height: 130,
autoScroll: true,
showSize: false,
showCloseBtn: false,
style: 'margin:2;',
xtype: "ux-image-panel",
anchor: '90%',
listeners: {
afterrender: function (imagePanels) {
Ext.each(images, function (item) {
imagePanels.addImage(item);
});
imagePanels.on('click', function (imagePanel, image) {
// 在这里执行跳转到空白页展示图片的逻辑
// 打开新的空白页面
var newWindow = window.open('', '_blank');
// 在新页面中添加图片元素
var img = newWindow.document.createElement('img');
img.src = image.url;
newWindow.document.body.appendChild(img);
});
}
}
}]
}
}
在函数_getImageShowPanel的listeners的afterrender事件中,添加了点击事件的处理函数。在点击事件处理函数中,首先使用window.open打开一个新的空白页面,并获取到新页面的document对象。然后,创建一个img元素,并将图片的URL赋值给src属性,最后将img元素添加到新页面的body中。这样就实现了在新页面中展示图片的功能。
原文地址: https://www.cveoy.top/t/topic/b1qp 著作权归作者所有。请勿转载和采集!