您的位置:首页 > Web前端

Extjs前端展示base64图片

2019-11-01 18:09 3107 查看

//定义图片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();
};

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Auto Scroll ExtJS