图片,Extjs前端展示base64图片"/>
extjs 显示服务器图片,Extjs前端展示base64图片
//定义图片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();
};
更多推荐
extjs 显示服务器图片,Extjs前端展示base64图片
发布评论