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