Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Working with Images

Page of 168

The Ext.Img class (xtype: image) enables you to easily add gif, png, and jpg images to your Sencha Touch layouts. You will typically configure one or more of the following properties:

Config Option Description
mode

String. Valid options are:

  • background
    Uses a background-image CSS property to display the image

  • img
    Inserts an <img> tag to display the image

Defaults to background.

src The URL of the image

Consequently, a simple instantiation of the Ext.Img class resembles the following:

{
 xtype: 'image',
 src: 'http://desktopstarships.com/NpGallery/originalimages/st_red_anomaly.jpg'
}

You can call the hide(), show(), and destroy() methods of the component in order to change its existence and visibility.

The following events are also supported:

Event Description
error Fires if an error occurs while attempting to load the image
load Fires after the image has been loaded.
tap Fires when the user taps the image

Note that you can also apply Sencha Touch's Ext.Element< events to any component. For example, the following class extends the Ext.Img class to add basic "pinch to zoom" functionality by attaching the "pinch" event to the DOM element created by the Ext.Image component:

Ext.define('MyApp.view.MyImage', {
 extend: 'Ext.Img',
 alias: 'widget.myimage',

 initialize: function() {

  this.callParent(arguments);

  // attach Ext.Element event listener
  this.element.on({
   scope: this,
   pinch: this.onPinch
  });

  // attach component event listener
  this.on({
    'tap': this.onRestoreSize
  });
 },

 onRestoreSize: function(cmp,e,eopts) {
    cmp.element.setStyle("background-size","100%");
 },

 onPinch: function(e,node,options,eOpts) {
  var scale = Ext.Number.toFixed(e.scale * 100,0);
  var style = scale + "% " + scale + "%";
  this.element.setStyle("background-size",style);
 }
});
Page of 168
comments powered by Disqus