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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
|
<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>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
<div id="cls-Ext.Template"></div>/**
* @class Ext.Template
* <p>Represents an HTML fragment template. Templates may be {@link #compile precompiled}
* for greater performance.</p>
* <p>For example usage {@link #Template see the constructor}.</p>
*
* @constructor
* An instance of this class may be created by passing to the constructor either
* a single argument, or multiple arguments:
* <div class="mdetail-params"><ul>
* <li><b>single argument</b> : String/Array
* <div class="sub-desc">
* The single argument may be either a String or an Array:<ul>
* <li><tt>String</tt> : </li><pre><code>
var t = new Ext.Template("<div>Hello {0}.</div>");
t.{@link #append}('some-element', ['foo']);
* </code></pre>
* <li><tt>Array</tt> : </li>
* An Array will be combined with <code>join('')</code>.
<pre><code>
var t = new Ext.Template([
'<div name="{id}">',
'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
'</div>',
]);
t.{@link #compile}();
t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
</code></pre>
* </ul></div></li>
* <li><b>multiple arguments</b> : String, Object, Array, ...
* <div class="sub-desc">
* Multiple arguments will be combined with <code>join('')</code>.
* <pre><code>
var t = new Ext.Template(
'<div name="{id}">',
'<span class="{cls}">{name} {value}</span>',
'</div>',
// a configuration object:
{
compiled: true, // {@link #compile} immediately
disableFormats: true // See Notes below.
}
);
* </code></pre>
* <p><b>Notes</b>:</p>
* <div class="mdetail-params"><ul>
* <li>Formatting and <code>disableFormats</code> are not applicable for Ext Core.</li>
* <li>For a list of available format functions, see {@link Ext.util.Format}.</li>
* <li><code>disableFormats</code> reduces <code>{@link #apply}</code> time
* when no formatting is required.</li>
* </ul></div>
* </div></li>
* </ul></div>
* @param {Mixed} config
*/
Ext.Template = function(html){
var me = this,
a = arguments,
buf = [],
v;
if (Ext.isArray(html)) {
html = html.join("");
} else if (a.length > 1) {
for(var i = 0, len = a.length; i < len; i++){
v = a[i];
if(typeof v == 'object'){
Ext.apply(me, v);
} else {
buf.push(v);
}
};
html = buf.join('');
}
/**@private*/
me.html = html;
<div id="cfg-Ext.Template-compiled"></div>/**
* @cfg {Boolean} compiled Specify <tt>true</tt> to compile the template
* immediately (see <code>{@link #compile}</code>).
* Defaults to <tt>false</tt>.
*/
if (me.compiled) {
me.compile();
}
};
Ext.Template.prototype = {
<div id="cfg-Ext.Template-re"></div>/**
* @cfg {RegExp} re The regular expression used to match template variables.
* Defaults to:<pre><code>
* re : /\{([\w\-]+)\}/g // for Ext Core
* re : /\{([\w\-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g // for Ext JS
* </code></pre>
*/
re : /\{([\w\-]+)\}/g,
<div id="prop-Ext.Template-re"></div>/**
* See <code>{@link #re}</code>.
* @type RegExp
* @property re
*/
<div id="method-Ext.Template-applyTemplate"></div>/**
* Returns an HTML fragment of this template with the specified <code>values</code> applied.
* @param {Object/Array} values
* The template values. Can be an array if the params are numeric (i.e. <code>{0}</code>)
* or an object (i.e. <code>{foo: 'bar'}</code>).
* @return {String} The HTML fragment
*/
applyTemplate : function(values){
var me = this;
return me.compiled ?
me.compiled(values) :
me.html.replace(me.re, function(m, name){
return values[name] !== undefined ? values[name] : "";
});
},
<div id="method-Ext.Template-set"></div>/**
* Sets the HTML used as the template and optionally compiles it.
* @param {String} html
* @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
* @return {Ext.Template} this
*/
set : function(html, compile){
var me = this;
me.html = html;
me.compiled = null;
return compile ? me.compile() : me;
},
<div id="method-Ext.Template-compile"></div>/**
* Compiles the template into an internal function, eliminating the RegEx overhead.
* @return {Ext.Template} this
*/
compile : function(){
var me = this,
sep = Ext.isGecko ? "+" : ",";
function fn(m, name){
name = "values['" + name + "']";
return "'"+ sep + '(' + name + " == undefined ? '' : " + name + ')' + sep + "'";
}
eval("this.compiled = function(values){ return " + (Ext.isGecko ? "'" : "['") +
me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
(Ext.isGecko ? "';};" : "'].join('');};"));
return me;
},
<div id="method-Ext.Template-insertFirst"></div>/**
* Applies the supplied values to the template and inserts the new node(s) as the first child of el.
* @param {Mixed} el The context element
* @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
* @return {HTMLElement/Ext.Element} The new node or Element
*/
insertFirst: function(el, values, returnElement){
return this.doInsert('afterBegin', el, values, returnElement);
},
<div id="method-Ext.Template-insertBefore"></div>/**
* Applies the supplied values to the template and inserts the new node(s) before el.
* @param {Mixed} el The context element
* @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
* @return {HTMLElement/Ext.Element} The new node or Element
*/
insertBefore: function(el, values, returnElement){
return this.doInsert('beforeBegin', el, values, returnElement);
},
<div id="method-Ext.Template-insertAfter"></div>/**
* Applies the supplied values to the template and inserts the new node(s) after el.
* @param {Mixed} el The context element
* @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
* @return {HTMLElement/Ext.Element} The new node or Element
*/
insertAfter : function(el, values, returnElement){
return this.doInsert('afterEnd', el, values, returnElement);
},
<div id="method-Ext.Template-append"></div>/**
* Applies the supplied <code>values</code> to the template and appends
* the new node(s) to the specified <code>el</code>.
* <p>For example usage {@link #Template see the constructor}.</p>
* @param {Mixed} el The context element
* @param {Object/Array} values
* The template values. Can be an array if the params are numeric (i.e. <code>{0}</code>)
* or an object (i.e. <code>{foo: 'bar'}</code>).
* @param {Boolean} returnElement (optional) true to return an Ext.Element (defaults to undefined)
* @return {HTMLElement/Ext.Element} The new node or Element
*/
append : function(el, values, returnElement){
return this.doInsert('beforeEnd', el, values, returnElement);
},
doInsert : function(where, el, values, returnEl){
el = Ext.getDom(el);
var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
return returnEl ? Ext.get(newNode, true) : newNode;
},
<div id="method-Ext.Template-overwrite"></div>/**
* Applies the supplied values to the template and overwrites the content of el with the new node(s).
* @param {Mixed} el The context element
* @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
* @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined)
* @return {HTMLElement/Ext.Element} The new node or Element
*/
overwrite : function(el, values, returnElement){
el = Ext.getDom(el);
el.innerHTML = this.applyTemplate(values);
return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
}
};
<div id="method-Ext.Template-apply"></div>/**
* Alias for {@link #applyTemplate}
* Returns an HTML fragment of this template with the specified <code>values</code> applied.
* @param {Object/Array} values
* The template values. Can be an array if the params are numeric (i.e. <code>{0}</code>)
* or an object (i.e. <code>{foo: 'bar'}</code>).
* @return {String} The HTML fragment
* @member Ext.Template
* @method apply
*/
Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;
<div id="method-Ext.Template-Template.from"></div>/**
* Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
* @param {String/HTMLElement} el A DOM element or its id
* @param {Object} config A configuration object
* @return {Ext.Template} The created template
* @static
*/
Ext.Template.from = function(el, config){
el = Ext.getDom(el);
return new Ext.Template(el.value || el.innerHTML, config || '');
};
</pre>
</body>
</html>
|
