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);
                                         }
                                     }]
                         }