4 * A Component subclass that adds a value to an image
6 Ext.require('Ext.panel.Panel');
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'
13 src: Ext.BLANK_IMAGE_URL,
14 cls: 'my-managed-image'
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);
26 this.fireEvent('load', this);
29 setSrc: function(src) {
31 this.el.dom.src = src;
37 getSrc: function(src) {
38 return this.el.dom.src || this.src;
42 Ext.onReady(function() {
44 var image = Ext.create('Ext.ux.Image');
46 Ext.create('Ext.panel.Panel', {
49 renderTo: Ext.getBody(),
53 image.on('load', function() {
54 console.log('image loaded: ', image.getSrc());
57 image.setSrc('http://www.sencha.com/img/sencha-large.png');