Img.js
2.83 KB
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
* Simple helper class for easily creating image components. This renders an image tag to
* the DOM with the configured src.
*
* {@img Ext.Img/Ext.Img.png Ext.Img component}
*
* ## Example usage:
*
* var changingImage = Ext.create('Ext.Img', {
* src: 'http://www.sencha.com/img/20110215-feat-html5.png',
* renderTo: Ext.getBody()
* });
*
* // change the src of the image programmatically
* changingImage.setSrc('http://www.sencha.com/img/20110215-feat-perf.png');
*
* By default, only an img element is rendered and that is this component's primary
* {@link Ext.AbstractComponent#getEl element}. If the {@link Ext.AbstractComponent#autoEl} property
* is other than 'img' (the default), the a child img element will be added to the primary
* element. This can be used to create a wrapper element around the img.
*
* ## Wrapping the img in a div:
*
* var wrappedImage = Ext.create('Ext.Img', {
* src: 'http://www.sencha.com/img/20110215-feat-html5.png',
* autoEl: 'div', // wrap in a div
* renderTo: Ext.getBody()
* });
*/
Ext.define('Ext.Img', {
extend: 'Ext.Component',
alias: ['widget.image', 'widget.imagecomponent'],
autoEl: 'img',
/**
* @cfg {String} src
* The image src.
*/
src: '',
/**
* @cfg {String} alt
* The descriptive text for non-visual UI description.
*/
alt: '',
/**
* @cfg {String} imgCls
* Optional CSS classes to add to the img element.
*/
imgCls: '',
getElConfig: function() {
var me = this,
config = me.callParent(),
img;
// It is sometimes helpful (like in a panel header icon) to have the img wrapped
// by a div. If our autoEl is not 'img' then we just add an img child to the el.
if (me.autoEl == 'img') {
img = config;
} else {
config.cn = [img = {
tag: 'img',
id: me.id + '-img'
}];
}
if (me.imgCls) {
img.cls = (img.cls ? img.cls + ' ' : '') + me.imgCls;
}
img.src = me.src || Ext.BLANK_IMAGE_URL;
if (me.alt) {
img.alt = me.alt;
}
return config;
},
onRender: function () {
var me = this,
el;
me.callParent(arguments);
el = me.el;
me.imgEl = (me.autoEl == 'img') ? el : el.getById(me.id + '-img');
},
onDestroy: function () {
Ext.destroy(this.imgEl);
this.imgEl = null;
this.callParent();
},
/**
* Updates the {@link #src} of the image.
* @param {String} src
*/
setSrc: function(src) {
var me = this,
imgEl = me.imgEl;
me.src = src;
if (imgEl) {
imgEl.dom.src = src || Ext.BLANK_IMAGE_URL;
}
}
});