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