Extjs 查看图片并添加放大缩小功能
Ext.define("App.view.ImgView", { extend : "Ext.panel.Panel", width:800, height: 740, img_index: 0, layout: 'border', buttonAlign:'center', set_img: function(index) { this.img_index=index; this.up('window').setTitle(this.src[index].name); Ext.getCmp('images-view').getSelectionModel().select(index); Ext.get(this.img_view_id).dom.src=this.src[index].uri; /* Ext.getCmp(this.id + '_next_btn').disabled = ((this.img_index + offset) == this.src.length - 1) ? true : false; Ext.getCmp(this.id + '_pre_btn').disabled = ((this.img_index + offset) == 0) ? true : false;*/ Ext.getCmp(this.id + '_next_btn').setDisabled((this.img_index == this.src.length - 1) ? true : false); Ext.getCmp(this.id + '_pre_btn').setDisabled ((this.img_index == 0) ? true : false); }, initComponent: function() { var cmp = this; cmp.img_view_id=this.id + '_img'; cmp.isBig=true; this.html = ' '; this.items=[{ xtype:'dataview', region: 'north', id: 'images-view', height:100, split: true, style:"background:#fff", store: cmp.columnStore, tpl: [ '', '
', '
', '
{name:htmlEncode}', '
', '', '
' ], trackOver: true, overItemCls: 'x-item-over', itemSelector: 'div.thumb-wrap', emptyText: 'No images to display', autoScroll : true, listeners:{ selectionchange:function(view ,recs){ cmp.set_img(recs[0].index); //console.log(cmp.img_index); /*Ext.get(cmp.img_view_id).dom.src=recs[0].data.url; cmp.img_index=recs[0].data.index; cmp.up('window').setTitle(recs[0].data.name);*/ /*view.parent.get('ImgSearch').setSrc(recs[0].data.url); cmp.img_index=recs[0].data.index; */ } }}]; this.buttons = [{ text: "上一张", disabled:true, id: this.id + '_pre_btn', handler: function() { Ext.getCmp(cmp.id + '_pre_btn').setDisabled(((cmp.img_index -1) == 0) ? true : false); if(cmp.img_index > 0) { cmp.img_index = cmp.img_index-1; cmp.set_img(cmp.img_index); } } },{ text: "下一张", id: this.id + '_next_btn', handler: function() { Ext.getCmp(cmp.id + '_pre_btn').setDisabled(((cmp.img_index +1) == cmp.src.length - 1) ? true : false); if(cmp.img_index < cmp.src.length - 1) { cmp.img_index = cmp.img_index+1; cmp.set_img(cmp.img_index); } } },{ text: "放大", handler: function() { cmp.isBig = true; Ext.get(cmp.img_view_id).setStyle({ cursor: 'zoom-in' }); cmp.zoom(Ext.get(cmp.img_view_id), 1.5, true); } },{ text: "缩小", handler: function() { cmp.isBig = false; Ext.get(cmp.img_view_id).setStyle({ cursor: 'zoom-out' }); cmp.zoom(Ext.get(cmp.img_view_id), 1.5, false); } }]; cmp.on('afterrender',cmp.XafterRender); this.callParent(arguments); }, XafterRender: function() { var $this=this; Ext.get($this.img_view_id).parent = this; new Ext.dd.DD(Ext.get($this.img_view_id), 'pic'); Ext.get($this.img_view_id).on({ 'click': { fn: function() { var isBig=$this.isBig; Ext.get(this).parent.zoom(Ext.get(this), 1.5, isBig); } }, 'contextmenu': { fn: function() { Ext.get(this).parent.zoom(Ext.get(this), 1.5, false); } }, 'mousewheel' : { fn : function(e) { var delta = e.getWheelDelta(); if (delta > 0) { Ext.get(this).parent.zoom(Ext.get(this), 1.5, true); } else { Ext.get(this).parent.zoom(Ext.get(this), 1.5, false); } } } }); }, //放大、缩小 zoom: function(el, offset, type) { el.setStyle({ cursor: type?'zoom-in':'zoom-out' }); var width = el.getWidth(); var height = el.getHeight(); var nwidth = type ? (width * offset) : (width / offset); var nheight = type ? (height * offset) : (height / offset); var left = type ? -((nwidth - width) / 2) : ((width - nwidth) / 2); var top = type ? -((nheight - height) / 2) : ((height - nheight) / 2); el.animate({ to: { width: nwidth+'px', height: nheight+'px' }, left: { by: left+'px' }, top: { by: top+'px' } }, null, null, 'backBoth', 'motion' ); } });