Extjs显示图片

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