Img.html
3.66 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-Img'>/**
</span> * 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',
<span id='Ext-Img-cfg-src'> /**
</span> * @cfg {String} src
* The image src.
*/
src: '',
<span id='Ext-Img-cfg-alt'> /**
</span> * @cfg {String} alt
* The descriptive text for non-visual UI description.
*/
alt: '',
<span id='Ext-Img-cfg-imgCls'> /**
</span> * @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();
},
<span id='Ext-Img-method-setSrc'> /**
</span> * 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;
}
}
});</pre>
</body>
</html>