4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
15 * For a list of available format functions, see {@link Roo.util.Format}.<br />
18 var t = new Roo.Template(
19 '<div name="{id}">',
20 '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
23 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
25 * For more information see this blog post with examples: <a href="http://www.jackslocum.com/yui/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">DomHelper - Create Elements using DOM, HTML fragments and Templates</a>.
27 * @param {String/Array} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
29 Roo.Template = function(html){
30 if(html instanceof Array){
32 }else if(arguments.length > 1){
33 html = Array.prototype.join.call(arguments, "");
39 Roo.Template.prototype = {
41 * Returns an HTML fragment of this template with the specified values applied.
42 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
43 * @return {String} The HTML fragment
45 applyTemplate : function(values){
49 return this.compiled(values);
51 var useF = this.disableFormats !== true;
52 var fm = Roo.util.Format, tpl = this;
53 var fn = function(m, name, format, args){
55 if(format.substr(0, 5) == "this."){
56 return tpl.call(format.substr(5), values[name], values);
59 // quoted values are required for strings in compiled templates,
60 // but for non compiled we need to strip them
61 // quoted reversed for jsmin
62 var re = /^\s*['"](.*)["']\s*$/;
63 args = args.split(',');
64 for(var i = 0, len = args.length; i < len; i++){
65 args[i] = args[i].replace(re, "$1");
67 args = [values[name]].concat(args);
69 args = [values[name]];
71 return fm[format].apply(fm, args);
74 return values[name] !== undefined ? values[name] : "";
77 return this.html.replace(this.re, fn);
79 Roo.log(e.toString());
85 * Sets the HTML used as the template and optionally compiles it.
86 * @param {String} html
87 * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
88 * @return {Roo.Template} this
90 set : function(html, compile){
100 * True to disable format functions (defaults to false)
103 disableFormats : false,
106 * The regular expression used to match template variables
110 re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
113 * Compiles the template into an internal function, eliminating the RegEx overhead.
114 * @return {Roo.Template} this
116 compile : function(){
117 var fm = Roo.util.Format;
118 var useF = this.disableFormats !== true;
119 var sep = Roo.isGecko ? "+" : ",";
120 var fn = function(m, name, format, args){
122 args = args ? ',' + args : "";
123 if(format.substr(0, 5) != "this."){
124 format = "fm." + format + '(';
126 format = 'this.call("'+ format.substr(5) + '", ';
130 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
132 return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
135 // branched to use + in gecko and [].join() in others
137 body = "this.compiled = function(values){ return '" +
138 this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
141 body = ["this.compiled = function(values){ return ['"];
142 body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
143 body.push("'].join('');};");
144 body = body.join('');
154 // private function used to call members
155 call : function(fnName, value, allValues){
156 return this[fnName](value, allValues);
160 * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
161 * @param {String/HTMLElement/Roo.Element} el The context element
162 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
163 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
164 * @return {HTMLElement/Roo.Element} The new node or Element
166 insertFirst: function(el, values, returnElement){
167 return this.doInsert('afterBegin', el, values, returnElement);
171 * Applies the supplied values to the template and inserts the new node(s) before el.
172 * @param {String/HTMLElement/Roo.Element} el The context element
173 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
174 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
175 * @return {HTMLElement/Roo.Element} The new node or Element
177 insertBefore: function(el, values, returnElement){
178 return this.doInsert('beforeBegin', el, values, returnElement);
182 * Applies the supplied values to the template and inserts the new node(s) after el.
183 * @param {String/HTMLElement/Roo.Element} el The context element
184 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
185 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
186 * @return {HTMLElement/Roo.Element} The new node or Element
188 insertAfter : function(el, values, returnElement){
189 return this.doInsert('afterEnd', el, values, returnElement);
193 * Applies the supplied values to the template and appends the new node(s) to el.
194 * @param {String/HTMLElement/Roo.Element} el The context element
195 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
196 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
197 * @return {HTMLElement/Roo.Element} The new node or Element
199 append : function(el, values, returnElement){
200 return this.doInsert('beforeEnd', el, values, returnElement);
203 doInsert : function(where, el, values, returnEl){
205 var newNode = Roo.DomHelper.insertHtml(where, el, this.applyTemplate(values));
206 return returnEl ? Roo.get(newNode, true) : newNode;
210 * Applies the supplied values to the template and overwrites the content of el with the new node(s).
211 * @param {String/HTMLElement/Roo.Element} el The context element
212 * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
213 * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
214 * @return {HTMLElement/Roo.Element} The new node or Element
216 overwrite : function(el, values, returnElement){
218 el.innerHTML = this.applyTemplate(values);
219 return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
223 * Alias for {@link #applyTemplate}
226 Roo.Template.prototype.apply = Roo.Template.prototype.applyTemplate;
229 Roo.DomHelper.Template = Roo.Template;
232 * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
233 * @param {String/HTMLElement} el A DOM element or its id
234 * @returns {Roo.Template} The created template
237 Roo.Template.from = function(el){
239 return new Roo.Template(el.value || el.innerHTML);