extjs5 使用xtype:image图片预览

概要

点击缩略图后，能预览大图

解决思路

1.点击图片，获取该图片的src

2.创建Ext.Window对象，嵌套xtype:image，将获取到的src注入到该xtype:image的src中

实现过程

创建Ext.Window对象

var imageWin = Ext.create('Ext.Window', {
　　width : 400,
　　height : 365,
　　resizable : true,
　　modal : true,
　　maximizable: true,
　　cloable : true,
　　closeAction : 'hide',
　　align : 'center',
　　layout : 'fit',
　　items : [{
	      xtype : 'image'
　　}],
　　title : '预览'
})

显示原图片

{
	xtype : 'fieldcontainer',
	fieldLabel : '图片',
	items : [{
		{
		    xtype : 'image',
		    src : Global.basePath + 'dataMain/download.htm?fileName=' + fileNames[i],
		    margin : '0 10 0 0',
		    style:'border:1px solid #CCC',
	            width : 80,
		    listeners : {
		        render : function(that) {
		            that.getEl().on('click', function() {
		                imageWin.down('image').setSrc(that.src);
		                imageWin.show();
		            })
		        }
		    }
		}
	}]
 }

效果图

预览之前

预览大图：

 总结

1.使用了xtype:image元素来显示图片，但是xtype:image自身没有click事件，所以需要手动绑定click事件

2.缩略图的click事件触发后，将其src注入到Ext.Window下的xtype:src，这样就达到了预览的效果

3.Ext.Window设置resizable方便手动调整窗口大小

4.使用fieldcontainer可以方便的添加fieldLabel，还可以添加items