tvheadend/vendor/ext-3.4.1/docs/source/Template.html
Adam Sutton bafcfff42d webui: restructure webui/extjs source files
I want to keep the 3rd-party packages away from the main source
where possible.
2013-06-03 17:11:01 +01:00

260 lines
11 KiB
HTML

<!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-Template-method-constructor'><span id='Ext-Template'>/**
</span></span> * @class Ext.Template
* &lt;p&gt;Represents an HTML fragment template. Templates may be {@link #compile precompiled}
* for greater performance.&lt;/p&gt;
* &lt;p&gt;For example usage {@link #Template see the constructor}.&lt;/p&gt;
*
* @constructor
* An instance of this class may be created by passing to the constructor either
* a single argument, or multiple arguments:
* &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
* &lt;li&gt;&lt;b&gt;single argument&lt;/b&gt; : String/Array
* &lt;div class=&quot;sub-desc&quot;&gt;
* The single argument may be either a String or an Array:&lt;ul&gt;
* &lt;li&gt;&lt;tt&gt;String&lt;/tt&gt; : &lt;/li&gt;&lt;pre&gt;&lt;code&gt;
var t = new Ext.Template(&quot;&amp;lt;div&gt;Hello {0}.&amp;lt;/div&gt;&quot;);
t.{@link #append}('some-element', ['foo']);
* &lt;/code&gt;&lt;/pre&gt;
* &lt;li&gt;&lt;tt&gt;Array&lt;/tt&gt; : &lt;/li&gt;
* An Array will be combined with &lt;code&gt;join('')&lt;/code&gt;.
&lt;pre&gt;&lt;code&gt;
var t = new Ext.Template([
'&amp;lt;div name=&quot;{id}&quot;&amp;gt;',
'&amp;lt;span class=&quot;{cls}&quot;&amp;gt;{name:trim} {value:ellipsis(10)}&amp;lt;/span&amp;gt;',
'&amp;lt;/div&amp;gt;',
]);
t.{@link #compile}();
t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
&lt;/code&gt;&lt;/pre&gt;
* &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
* &lt;li&gt;&lt;b&gt;multiple arguments&lt;/b&gt; : String, Object, Array, ...
* &lt;div class=&quot;sub-desc&quot;&gt;
* Multiple arguments will be combined with &lt;code&gt;join('')&lt;/code&gt;.
* &lt;pre&gt;&lt;code&gt;
var t = new Ext.Template(
'&amp;lt;div name=&quot;{id}&quot;&amp;gt;',
'&amp;lt;span class=&quot;{cls}&quot;&amp;gt;{name} {value}&amp;lt;/span&amp;gt;',
'&amp;lt;/div&amp;gt;',
// a configuration object:
{
compiled: true, // {@link #compile} immediately
disableFormats: true // See Notes below.
}
);
* &lt;/code&gt;&lt;/pre&gt;
* &lt;p&gt;&lt;b&gt;Notes&lt;/b&gt;:&lt;/p&gt;
* &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
* &lt;li&gt;Formatting and &lt;code&gt;disableFormats&lt;/code&gt; are not applicable for Ext Core.&lt;/li&gt;
* &lt;li&gt;For a list of available format functions, see {@link Ext.util.Format}.&lt;/li&gt;
* &lt;li&gt;&lt;code&gt;disableFormats&lt;/code&gt; reduces &lt;code&gt;{@link #apply}&lt;/code&gt; time
* when no formatting is required.&lt;/li&gt;
* &lt;/ul&gt;&lt;/div&gt;
* &lt;/div&gt;&lt;/li&gt;
* &lt;/ul&gt;&lt;/div&gt;
* @param {Mixed} config
*/
Ext.Template = function(html){
var me = this,
a = arguments,
buf = [],
v;
if (Ext.isArray(html)) {
html = html.join(&quot;&quot;);
} else if (a.length &gt; 1) {
for(var i = 0, len = a.length; i &lt; len; i++){
v = a[i];
if(typeof v == 'object'){
Ext.apply(me, v);
} else {
buf.push(v);
}
};
html = buf.join('');
}
<span id='Ext-Template-property-html'> /**@private*/
</span> me.html = html;
<span id='Ext-Template-cfg-compiled'> /**
</span> * @cfg {Boolean} compiled Specify &lt;tt&gt;true&lt;/tt&gt; to compile the template
* immediately (see &lt;code&gt;{@link #compile}&lt;/code&gt;).
* Defaults to &lt;tt&gt;false&lt;/tt&gt;.
*/
if (me.compiled) {
me.compile();
}
};
Ext.Template.prototype = {
<span id='Ext-Template-cfg-re'> /**
</span> * @cfg {RegExp} re The regular expression used to match template variables.
* Defaults to:&lt;pre&gt;&lt;code&gt;
* re : /\{([\w\-]+)\}/g // for Ext Core
* re : /\{([\w\-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g // for Ext JS
* &lt;/code&gt;&lt;/pre&gt;
*/
re : /\{([\w\-]+)\}/g,
<span id='Ext-Template-property-re'> /**
</span> * See &lt;code&gt;{@link #re}&lt;/code&gt;.
* @type RegExp
* @property re
*/
<span id='Ext-Template-method-applyTemplate'> /**
</span> * Returns an HTML fragment of this template with the specified &lt;code&gt;values&lt;/code&gt; applied.
* @param {Object/Array} values
* The template values. Can be an array if the params are numeric (i.e. &lt;code&gt;{0}&lt;/code&gt;)
* or an object (i.e. &lt;code&gt;{foo: 'bar'}&lt;/code&gt;).
* @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] : &quot;&quot;;
});
},
<span id='Ext-Template-method-set'> /**
</span> * 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;
},
<span id='Ext-Template-method-compile'> /**
</span> * Compiles the template into an internal function, eliminating the RegEx overhead.
* @return {Ext.Template} this
*/
compile : function(){
var me = this,
sep = Ext.isGecko ? &quot;+&quot; : &quot;,&quot;;
function fn(m, name){
name = &quot;values['&quot; + name + &quot;']&quot;;
return &quot;'&quot;+ sep + '(' + name + &quot; == undefined ? '' : &quot; + name + ')' + sep + &quot;'&quot;;
}
eval(&quot;this.compiled = function(values){ return &quot; + (Ext.isGecko ? &quot;'&quot; : &quot;['&quot;) +
me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, &quot;\\'&quot;).replace(this.re, fn) +
(Ext.isGecko ? &quot;';};&quot; : &quot;'].join('');};&quot;));
return me;
},
<span id='Ext-Template-method-insertFirst'> /**
</span> * 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);
},
<span id='Ext-Template-method-insertBefore'> /**
</span> * 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);
},
<span id='Ext-Template-method-insertAfter'> /**
</span> * 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);
},
<span id='Ext-Template-method-append'> /**
</span> * Applies the supplied &lt;code&gt;values&lt;/code&gt; to the template and appends
* the new node(s) to the specified &lt;code&gt;el&lt;/code&gt;.
* &lt;p&gt;For example usage {@link #Template see the constructor}.&lt;/p&gt;
* @param {Mixed} el The context element
* @param {Object/Array} values
* The template values. Can be an array if the params are numeric (i.e. &lt;code&gt;{0}&lt;/code&gt;)
* or an object (i.e. &lt;code&gt;{foo: 'bar'}&lt;/code&gt;).
* @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;
},
<span id='Ext-Template-method-overwrite'> /**
</span> * 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;
}
};
<span id='Ext-Template-method-apply'>/**
</span> * Alias for {@link #applyTemplate}
* Returns an HTML fragment of this template with the specified &lt;code&gt;values&lt;/code&gt; applied.
* @param {Object/Array} values
* The template values. Can be an array if the params are numeric (i.e. &lt;code&gt;{0}&lt;/code&gt;)
* or an object (i.e. &lt;code&gt;{foo: 'bar'}&lt;/code&gt;).
* @return {String} The HTML fragment
* @member Ext.Template
* @method apply
*/
Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate;
<span id='Ext-Template-static-method-from'>/**
</span> * Creates a template from the passed element's value (&lt;i&gt;display:none&lt;/i&gt; 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>