Extjs显示图片

1、首先做一个容器

xtype : 'container', // 第2行
anchor : '100%',
layout : 'column',
items : [{
          columnWidth : 0.4,
          layout : 'anchor',
          border : false,
          items : [{
                    xtype : 'box', // 或者xtype: 'component',
                    width : 100, // 图片宽度
                    height : 100, // 图片高度
                    id : 'imagebox',
                    autoEl : {
                            tag : 'img', // 指定为img标签
                            src : '../../images/main/imageInfo.png' // 指定url路径
                           }
                 }]
       }]

2、图片的动态更新
showProdArchiveWindow.show(); 
Ext.getCmp("imagebox").getEl().dom.src = getHostUrl() + getURLPath() + prodArchiveJson.picUrl; 

注：动态指定url路径一定要放在.show()方法后面，不然js会报错

 3、grid显示图片

{
                            xtype : 'actioncolumn',
                            text : '产品档案图片',
                            tooltip : '产品档案图片',
                            // dataIndex : 'picUrl',
                            width : 120,
                            sortable : true,
                            items : [{
                                        icon : '../../images/main/imageInfo.png',
                                        tooltip : '点击查看大图',
                                        handler : function(grid, rowIndex, colIndex) {
                                            var rec = grid.getStore().getAt(rowIndex);
                                            showImage(rec.data.picUrl);
                                        }
                                    }]
                        }