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();

};