ExtJs 查看图片弹出窗口

最新推荐文章于 2021-08-13 00:54:33 发布

清风明月和我

最新推荐文章于 2021-08-13 00:54:33 发布

阅读量1.5k

点赞数 3

分类专栏：前端文章标签： extjs 图片显示

本文链接：https://blog.csdn.net/shenju2011/article/details/75006192

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

//定义图片form
var picForm = new Ext.form.FormPanel({
bodyStyle : 'padding:5px 5px 5px 5px',
labelAlign : 'right',
id : 'picture_form',
labelWidth : 60,
autoScroll : true,
layout : 'column',
region : 'south',
buttonAlign : 'center',
frame : true,
items : [{}]
});
//图片弹出窗口
var picWindow = new Ext.Window({
title : '影像资料',
width : 550,
height : 450,
layout : 'fit',
items : [ picForm ],
closeAction : 'hide',
buttons : [ {
text : '关闭',
handler : function() {
picWindow.hide();
}
} ]
});
//图片加载方法
var createPictureToShow = function(id, urlValue) {
var field;
field = {
layout : 'form',
columnWidth : 1,
items : [ {
xtype : 'box',
name : id,
height : 350, // 图片高度
width : 500, // 图片宽度
autoEl : {
tag : 'img', // 指定为img标签
src : urlValue
},
readOnly : true
} ]
};


return field;
};
/**
* 图片查看按钮方法 val是 图片地址 可以是多张以";" 隔开
**/ 
picLookFtn = function(val) {
picForm.removeAll();
var picture_form = Ext.getCmp('picture_form');
var url_= val.split(';');
for(i=0;i<url_.length-1;i++){
var pic_url=url_[i];
var o = createPictureToShow(i,pic_url);
picture_form.add(o); 
}
// picture_form.add(o); 
picture_form.doLayout();
picWindow.show();
};