Uses the Panzoom Library
https://github.com/timmywil/panzoom
Source at GitHub
https://github.com/wencywww/Ext.ux.PanImageComponent
Demos
Sencha's Fiddle: https://fiddle.sencha.com/#fiddle/3h23
Features:
- Uses the Panzoom library to add pan/zoom capabilities to ExtJS Image component
- Registers the 'panimage' / 'panimagecomponent' xtypes
- Once instantiated, the Ext.Img underlying image can be panned with the mouse and zoomed (mouse wheel)
- Tested with ExtJS version 4.2.1.883 and up to 7.5.0
Configuration options:
- componentConfig (object) - use this to provide configuration options for the Panzoom instances (see https://github.com/timmywil/panzoom for details)
default is:
{ animate: true, maxScale: 5, contain: 'outside' }
Usage:
- Include the
src/PanImage.js
file, it contains the panzoom 4.4.3 minified source (Ext must be included prior to this) - Instantiate the class, for example:
or use 'panimage'/'panimagecomponent' xtype like so:
var panZoomImage = Ext.create('Ext.ux.PanImageComponent', renderTo:{Ext.getBody()});
var panZoomImage = Ext.widget('panimage', { componentConfig: { maxScale: 10 } });
List of Changes
- 2021-11-16, initial commit