wencywww / ext.ux.panimagecomponent

Ext.Img component with pan and zoom capabilties

Sencha ExtJS Image component with Pan & Zoom features

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:

    var panZoomImage = Ext.create('Ext.ux.PanImageComponent', renderTo:{Ext.getBody()});

  or use 'panimage'/'panimagecomponent' xtype like so:

    
    var panZoomImage = Ext.widget('panimage', {
      componentConfig: {
          maxScale: 10
        } 
    });

List of Changes

• 2021-11-16, initial commit