docs/guides/components/examples/managed_image/app.js

   1 /**
   2  * @example Image
   3  *
   4  * A Component subclass that adds a value to an image
   5  */
   6 Ext.require('Ext.panel.Panel');
   7
   8 Ext.define('Ext.ux.Image', {
   9     extend: 'Ext.Component', // subclass Ext.Component
  10     alias: 'widget.managedimage', // this component will have an xtype of 'managedimage'
  11     autoEl: {
  12         tag: 'img',
  13         src: Ext.BLANK_IMAGE_URL,
  14         cls: 'my-managed-image'
  15     },
  16
  17     // Add custom processing to the onRender phase.
  18     // Add a ‘load’ listener to the element.
  19     onRender: function() {
  20         this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
  21         this.callParent(arguments);
  22         this.el.on('load', this.onLoad, this);
  23     },
  24
  25     onLoad: function() {
  26         this.fireEvent('load', this);
  27     },
  28
  29     setSrc: function(src) {
  30         if (this.rendered) {
  31             this.el.dom.src = src;
  32         } else {
  33             this.src = src;
  34         }
  35     },
  36
  37     getSrc: function(src) {
  38         return this.el.dom.src || this.src;
  39     }
  40 });
  41
  42 Ext.onReady(function() {
  43
  44     var image = Ext.create('Ext.ux.Image');
  45
  46     Ext.create('Ext.panel.Panel', {
  47         title: 'Image Panel',
  48         height: 200,
  49         renderTo: Ext.getBody(),
  50         items: [ image ]
  51     })
  52
  53     image.on('load', function() {
  54         console.log('image loaded: ', image.getSrc());
  55     });
  56
  57     image.setSrc('http://www.sencha.com/img/sencha-large.png');
  58
  59 });