1、首先做一個容器

1 xtype : 'container', // 第2行 2 anchor : '100%', 3 layout : 'column', 4 items : [{ 5 columnWidth : 0.4, 6 layout : 'anchor', 7 border : false, 8 items : [{ 9 xtype : 'box', // 或者xtype: 'component', 11 width : 100, // 圖片寬度 12 height : 100, // 圖片高度 13 id : 'imagebox', 14 autoEl : { 15 tag : 'img', // 指定為img標簽 16 src : '../../images/main/imageInfo.png' // 指定url路徑 18 } 19 }] 20 }]

2、圖片的動態更新
1 showProdArchiveWindow.show();
2 Ext.getCmp("imagebox").getEl().dom.src = getHostUrl() + getURLPath() + prodArchiveJson.picUrl;?

注：動態指定url路徑一定要放在.show()方法后面，不然js會報錯

?3、grid顯示圖片

1 { 2 xtype : 'actioncolumn', 3 text : '產品檔案圖片', 4 tooltip : '產品檔案圖片', 5 // dataIndex : 'picUrl', 6 width : 120, 7 sortable : true, 8 items : [{ 9 icon : '../../images/main/imageInfo.png', 10 tooltip : '點擊查看大圖', 11 handler : function(grid, rowIndex, colIndex) { 12 var rec = grid.getStore().getAt(rowIndex); 13 showImage(rec.data.picUrl); 14 } 15 }] 16 }

?

轉載于:https://www.cnblogs.com/BobXie85/p/8006300.html

總結

以上是生活随笔為你收集整理的Extjs显示图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。