ProtoElement.html
7.82 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!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">/*
* The dirty implementation in this class is quite naive. The reasoning for this is that the dirty state
* will only be used in very specific circumstances, specifically, after the render process has begun but
* the component is not yet rendered to the DOM. As such, we want it to perform as quickly as possible
* so it's not as fully featured as you may expect.
*/
<span id='Ext-util-ProtoElement'>/**
</span> * Manages certain element-like data prior to rendering. These values are passed
* on to the render process. This is currently used to manage the "class" and "style" attributes
* of a component's primary el as well as the bodyEl of panels. This allows things like
* addBodyCls in Panel to share logic with addCls in AbstractComponent.
* @private
*/
Ext.define('Ext.util.ProtoElement', (function () {
var splitWords = Ext.String.splitWords,
toMap = Ext.Array.toMap;
return {
isProtoEl: true,
<span id='Ext-util-ProtoElement-property-clsProp'> /**
</span> * The property name for the className on the data object passed to {@link #writeTo}.
*/
clsProp: 'cls',
<span id='Ext-util-ProtoElement-property-styleProp'> /**
</span> * The property name for the style on the data object passed to {@link #writeTo}.
*/
styleProp: 'style',
<span id='Ext-util-ProtoElement-property-removedProp'> /**
</span> * The property name for the removed classes on the data object passed to {@link #writeTo}.
*/
removedProp: 'removed',
<span id='Ext-util-ProtoElement-property-styleIsText'> /**
</span> * True if the style must be converted to text during {@link #writeTo}. When used to
* populate tpl data, this will be true. When used to populate {@link Ext.DomHelper}
* specs, this will be false (the default).
*/
styleIsText: false,
constructor: function (config) {
var me = this;
Ext.apply(me, config);
me.classList = splitWords(me.cls);
me.classMap = toMap(me.classList);
delete me.cls;
if (Ext.isFunction(me.style)) {
me.styleFn = me.style;
delete me.style;
} else if (typeof me.style == 'string') {
me.style = Ext.Element.parseStyles(me.style);
} else if (me.style) {
me.style = Ext.apply({}, me.style); // don't edit the given object
}
},
<span id='Ext-util-ProtoElement-method-flush'> /**
</span> * Indicates that the current state of the object has been flushed to the DOM, so we need
* to track any subsequent changes
*/
flush: function(){
this.flushClassList = [];
this.removedClasses = {};
// clear the style, it will be recreated if we add anything new
delete this.style;
},
<span id='Ext-util-ProtoElement-method-addCls'> /**
</span> * Adds class to the element.
* @param {String} cls One or more classnames separated with spaces.
* @return {Ext.util.ProtoElement} this
*/
addCls: function (cls) {
var me = this,
add = splitWords(cls),
length = add.length,
list = me.classList,
map = me.classMap,
flushList = me.flushClassList,
i = 0,
c;
for (; i < length; ++i) {
c = add[i];
if (!map[c]) {
map[c] = true;
list.push(c);
if (flushList) {
flushList.push(c);
delete me.removedClasses[c];
}
}
}
return me;
},
<span id='Ext-util-ProtoElement-method-hasCls'> /**
</span> * True if the element has given class.
* @param {String} cls
* @return {Boolean}
*/
hasCls: function (cls) {
return cls in this.classMap;
},
<span id='Ext-util-ProtoElement-method-removeCls'> /**
</span> * Removes class from the element.
* @param {String} cls One or more classnames separated with spaces.
* @return {Ext.util.ProtoElement} this
*/
removeCls: function (cls) {
var me = this,
list = me.classList,
newList = (me.classList = []),
remove = toMap(splitWords(cls)),
length = list.length,
map = me.classMap,
removedClasses = me.removedClasses,
i, c;
for (i = 0; i < length; ++i) {
c = list[i];
if (remove[c]) {
if (removedClasses) {
if (map[c]) {
removedClasses[c] = true;
Ext.Array.remove(me.flushClassList, c);
}
}
delete map[c];
} else {
newList.push(c);
}
}
return me;
},
<span id='Ext-util-ProtoElement-method-setStyle'> /**
</span> * Adds styles to the element.
* @param {String/Object} prop The style property to be set, or an object of multiple styles.
* @param {String} [value] The value to apply to the given property.
* @return {Ext.util.ProtoElement} this
*/
setStyle: function (prop, value) {
var me = this,
style = me.style || (me.style = {});
if (typeof prop == 'string') {
if (arguments.length === 1) {
me.setStyle(Ext.Element.parseStyles(prop));
} else {
style[prop] = value;
}
} else {
Ext.apply(style, prop);
}
return me;
},
<span id='Ext-util-ProtoElement-method-writeTo'> /**
</span> * Writes style and class properties to given object.
* Styles will be written to {@link #styleProp} and class names to {@link #clsProp}.
* @param {Object} to
* @return {Object} to
*/
writeTo: function (to) {
var me = this,
classList = me.flushClassList || me.classList,
removedClasses = me.removedClasses,
style;
if (me.styleFn) {
style = Ext.apply({}, me.styleFn());
Ext.apply(style, me.style);
} else {
style = me.style;
}
to[me.clsProp] = classList.join(' ');
if (style) {
to[me.styleProp] = me.styleIsText ? Ext.DomHelper.generateStyles(style) : style;
}
if (removedClasses) {
removedClasses = Ext.Object.getKeys(removedClasses);
if (removedClasses.length) {
to[me.removedProp] = removedClasses.join(' ');
}
}
return to;
}
};
}()));
</pre>
</body>
</html>