A template class that supports advanced functionality like:
XTemplate provides the templating mechanism built into:
The Ext.Template describes\nthe acceptable parameters to pass to the constructor. The following\nexamples demonstrate all of the supported features.
\n\nThis is the data object used for reference in each code example:
\nvar data = {\nname: 'Tommy Maintz',\ntitle: 'Lead Developer',\ncompany: 'Sencha Inc.',\nemail: 'tommy@sencha.com',\naddress: '5 Cups Drive',\ncity: 'Palo Alto',\nstate: 'CA',\nzip: '44102',\ndrinks: ['Coffee', 'Soda', 'Water'],\nkids: [{\n name: 'Joshua',\n age:3\n },{\n name: 'Matthew',\n age:2\n },{\n name: 'Solomon',\n age:0\n}]\n};\n The tpl tag and the for operator are used\nto process the provided data object:\n
<tpl for=\".\">...</tpl> // loop through array at root node\n<tpl for=\"foo\">...</tpl> // loop through array at foo node\n<tpl for=\"foo.bar\">...</tpl> // loop through array at foo.bar node\n var tpl = new Ext.XTemplate(\n '<p>Kids: ',\n '<tpl for=\".\">', // process the data.kids node\n '<p>{#}. {name}</p>', // use current array index to autonumber\n '</tpl></p>'\n);\ntpl.overwrite(panel.body, data.kids); // pass the kids property of the data object\n An example illustrating how the for property can be leveraged\nto access specified members of the provided data object to populate the template:
\nvar tpl = new Ext.XTemplate(\n '<p>Name: {name}</p>',\n '<p>Title: {title}</p>',\n '<p>Company: {company}</p>',\n '<p>Kids: ',\n '<tpl for=\"kids\">', // interrogate the kids property within the data\n '<p>{name}</p>',\n '</tpl></p>'\n);\ntpl.overwrite(panel.body, data); // pass the root node of the data object\n Flat arrays that contain values (and not objects) can be auto-rendered\nusing the special {.} variable inside a loop. This variable\nwill represent the value of the array at the current index:
\nvar tpl = new Ext.XTemplate(\n '<p>{name}\\'s favorite beverages:</p>',\n '<tpl for=\"drinks\">',\n '<div> - {.}</div>',\n '</tpl>'\n);\ntpl.overwrite(panel.body, data);\n When processing a sub-template, for example while looping through a child array,\nyou can access the parent object's members via the parent object:
\nvar tpl = new Ext.XTemplate(\n '<p>Name: {name}</p>',\n '<p>Kids: ',\n '<tpl for=\"kids\">',\n '<tpl if=\"age > 1\">',\n '<p>{name}</p>',\n '<p>Dad: {parent.name}</p>',\n '</tpl>',\n '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n The tpl tag and the if operator are used\nto provide conditional checks for deciding whether or not to render specific\nparts of the template. Notes:
<tpl if=\"age > 1 && age < 10\">Child</tpl>\n<tpl if=\"age >= 10 && age < 18\">Teenager</tpl>\n<tpl if=\"this.isGirl(name)\">...</tpl>\n<tpl if=\"id==\\'download\\'\">...</tpl>\n<tpl if=\"needsIcon\"><img src=\"{icon}\" class=\"{iconCls}\"/></tpl>\n// no good:\n<tpl if=\"name == \"Tommy\"\">Hello</tpl>\n// encode " if it is part of the condition, e.g.\n<tpl if=\"name == "Tommy"\">Hello</tpl>\nvar tpl = new Ext.XTemplate(\n '<p>Name: {name}</p>',\n '<p>Kids: ',\n '<tpl for=\"kids\">',\n '<tpl if=\"age > 1\">',\n '<p>{name}</p>',\n '</tpl>',\n '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n The following basic math operators may be applied directly on numeric\ndata values:
\n+ - * /\n\nFor example:\n
var tpl = new Ext.XTemplate(\n '<p>Name: {name}</p>',\n '<p>Kids: ',\n '<tpl for=\"kids\">',\n '<tpl if=\"age > 1\">', // <-- Note that the > is encoded\n '<p>{#}: {name}</p>', // <-- Auto-number each item\n '<p>In 5 Years: {age+5}</p>', // <-- Basic math\n '<p>Dad: {parent.name}</p>',\n '</tpl>',\n '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n Anything between {[ ... ]} is considered code to be executed\nin the scope of the template. There are some special variables available in that code:\n
var tpl = new Ext.XTemplate(\n '<p>Name: {name}</p>',\n '<p>Company: {[values.company.toUpperCase() + \", \" + values.title]}</p>',\n '<p>Kids: ',\n '<tpl for=\"kids\">',\n '<div class=\"{[xindex % 2 === 0 ? \"even\" : \"odd\"]}\">',\n '{name}',\n '</div>',\n '</tpl></p>'\n );\ntpl.overwrite(panel.body, data);\n One or more member functions can be specified in a configuration\nobject passed into the XTemplate constructor for more complex processing:
\nvar tpl = new Ext.XTemplate(\n '<p>Name: {name}</p>',\n '<p>Kids: ',\n '<tpl for=\"kids\">',\n '<tpl if=\"this.isGirl(name)\">',\n '<p>Girl: {name} - {age}</p>',\n '</tpl>',\n // use opposite if statement to simulate 'else' processing:\n '<tpl if=\"this.isGirl(name) == false\">',\n '<p>Boy: {name} - {age}</p>',\n '</tpl>',\n '<tpl if=\"this.isBaby(age)\">',\n '<p>{name} is a baby!</p>',\n '</tpl>',\n '</tpl></p>',\n {\n // XTemplate configuration:\n compiled: true,\n // member functions:\n isGirl: function(name){\n return name == 'Sara Grace';\n },\n isBaby: function(age){\n return age < 1;\n }\n }\n);\ntpl.overwrite(panel.body, data);\n The regular expression used to match code variables (default: matches {[expression]}).
\n", + "private": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/XTemplate.js", + "linenr": 359, + "html_filename": "XTemplate.html", + "href": "XTemplate.html#Ext-XTemplate-cfg-codeRe" + }, + { + "tagname": "cfg", + "name": "disableFormats", + "member": "Ext.Template", + "type": "Boolean", + "doc": "true to disable format functions in the template. If the template doesn't contain format functions, setting\ndisableFormats to true will reduce apply time (defaults to false)
\n", + "private": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/Template.js", + "linenr": 111, + "html_filename": "Template2.html", + "href": "Template2.html#Ext-Template-cfg-disableFormats", + "shortDoc": "true to disable format functions in the template. If the template doesn't contain format functions, setting\ndisableFo..." + } + ], + "method": [ + { + "tagname": "method", + "name": "append", + "member": "Ext.Template", + "doc": "Applies the supplied values to the template and appends\nthe new node(s) to the specified el.
For example usage see the constructor.
\n\n", + "params": [ + { + "type": "Mixed", + "name": "el", + "doc": "The context element
\n", + "optional": false + }, + { + "type": "Object/Array", + "name": "values", + "doc": "The template values. Can be an array if the params are numeric (i.e. {0})\nor an object (i.e. {foo: 'bar'}).
(optional) true to return an Ext.core.Element (defaults to undefined)
\n", + "optional": true + } + ], + "return": { + "type": "HTMLElement/Ext.core.Element", + "doc": "The new node or Element
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/Template.js", + "linenr": 237, + "html_filename": "Template2.html", + "href": "Template2.html#Ext-Template-method-append", + "shortDoc": "Applies the supplied values to the template and appends\nthe new node(s) to the specified el.\n\nFor example usage see t..." + }, + { + "tagname": "method", + "name": "apply", + "member": "Ext.XTemplate", + "doc": "Alias for applyTemplate\nReturns an HTML fragment of this template with the specified values applied.
\n", + "params": [ + { + "type": "Object/Array", + "name": "values", + "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", + "optional": false + } + ], + "return": { + "type": "String", + "doc": "The HTML fragment
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/XTemplate.js", + "linenr": 488, + "html_filename": "XTemplate.html", + "href": "XTemplate.html#Ext-XTemplate-method-apply", + "shortDoc": "Alias for applyTemplate\nReturns an HTML fragment of this template with the specified values applied.
\n" + }, + { + "tagname": "method", + "name": "applyTemplate", + "member": "Ext.XTemplate", + "doc": "Returns an HTML fragment of this template with the specified values applied.
\n", + "params": [ + { + "type": "Object", + "name": "values", + "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", + "optional": false + } + ], + "return": { + "type": "String", + "doc": "The HTML fragment
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/XTemplate.js", + "linenr": 471, + "html_filename": "XTemplate.html", + "href": "XTemplate.html#Ext-XTemplate-method-applyTemplate", + "shortDoc": "Returns an HTML fragment of this template with the specified values applied.
\n" + }, + { + "tagname": "method", + "name": "compile", + "member": "Ext.XTemplate", + "doc": "Compile the template to a function for optimized performance. Recommended if the template will be used frequently.
\n", + "params": [ + + ], + "return": { + "type": "Function", + "doc": "The compiled function
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/XTemplate.js", + "linenr": 480, + "html_filename": "XTemplate.html", + "href": "XTemplate.html#Ext-XTemplate-method-compile", + "shortDoc": "Compile the template to a function for optimized performance. Recommended if the template will be used frequently.
\n" + }, + { + "tagname": "method", + "name": "from", + "member": "Ext.XTemplate", + "doc": "Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
\n", + "params": [ + { + "type": "String/HTMLElement", + "name": "el", + "doc": "A DOM element or its id
\n", + "optional": false + }, + { + "type": "Object", + "name": "config", + "doc": "\n", + "optional": false + } + ], + "return": { + "type": "Ext.Template", + "doc": "The created template
\n" + }, + "private": false, + "static": true, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/XTemplate.js", + "linenr": 268, + "html_filename": "XTemplate.html", + "href": "XTemplate.html#Ext-XTemplate-method-from", + "shortDoc": "Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
\n" + }, + { + "tagname": "method", + "name": "insertAfter", + "member": "Ext.Template", + "doc": "Applies the supplied values to the template and inserts the new node(s) after el.
\n", + "params": [ + { + "type": "Mixed", + "name": "el", + "doc": "The context element
\n", + "optional": false + }, + { + "type": "Object/Array", + "name": "values", + "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", + "optional": false + }, + { + "type": "Boolean", + "name": "returnElement", + "doc": "(optional) true to return a Ext.core.Element (defaults to undefined)
\n", + "optional": true + } + ], + "return": { + "type": "HTMLElement/Ext.core.Element", + "doc": "The new node or Element
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/Template.js", + "linenr": 226, + "html_filename": "Template2.html", + "href": "Template2.html#Ext-Template-method-insertAfter", + "shortDoc": "Applies the supplied values to the template and inserts the new node(s) after el.
\n" + }, + { + "tagname": "method", + "name": "insertBefore", + "member": "Ext.Template", + "doc": "Applies the supplied values to the template and inserts the new node(s) before el.
\n", + "params": [ + { + "type": "Mixed", + "name": "el", + "doc": "The context element
\n", + "optional": false + }, + { + "type": "Object/Array", + "name": "values", + "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", + "optional": false + }, + { + "type": "Boolean", + "name": "returnElement", + "doc": "(optional) true to return a Ext.core.Element (defaults to undefined)
\n", + "optional": true + } + ], + "return": { + "type": "HTMLElement/Ext.core.Element", + "doc": "The new node or Element
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/Template.js", + "linenr": 215, + "html_filename": "Template2.html", + "href": "Template2.html#Ext-Template-method-insertBefore", + "shortDoc": "Applies the supplied values to the template and inserts the new node(s) before el.
\n" + }, + { + "tagname": "method", + "name": "insertFirst", + "member": "Ext.Template", + "doc": "Applies the supplied values to the template and inserts the new node(s) as the first child of el.
\n", + "params": [ + { + "type": "Mixed", + "name": "el", + "doc": "The context element
\n", + "optional": false + }, + { + "type": "Object/Array", + "name": "values", + "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", + "optional": false + }, + { + "type": "Boolean", + "name": "returnElement", + "doc": "(optional) true to return a Ext.core.Element (defaults to undefined)
\n", + "optional": true + } + ], + "return": { + "type": "HTMLElement/Ext.core.Element", + "doc": "The new node or Element
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/Template.js", + "linenr": 204, + "html_filename": "Template2.html", + "href": "Template2.html#Ext-Template-method-insertFirst", + "shortDoc": "Applies the supplied values to the template and inserts the new node(s) as the first child of el.
\n" + }, + { + "tagname": "method", + "name": "overwrite", + "member": "Ext.Template", + "doc": "Applies the supplied values to the template and overwrites the content of el with the new node(s).
\n", + "params": [ + { + "type": "Mixed", + "name": "el", + "doc": "The context element
\n", + "optional": false + }, + { + "type": "Object/Array", + "name": "values", + "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", + "optional": false + }, + { + "type": "Boolean", + "name": "returnElement", + "doc": "(optional) true to return a Ext.core.Element (defaults to undefined)
\n", + "optional": true + } + ], + "return": { + "type": "HTMLElement/Ext.core.Element", + "doc": "The new node or Element
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/Template.js", + "linenr": 258, + "html_filename": "Template2.html", + "href": "Template2.html#Ext-Template-method-overwrite", + "shortDoc": "Applies the supplied values to the template and overwrites the content of el with the new node(s).
\n" + }, + { + "tagname": "method", + "name": "set", + "member": "Ext.Template", + "doc": "Sets the HTML used as the template and optionally compiles it.
\n", + "params": [ + { + "type": "String", + "name": "html", + "doc": "\n", + "optional": false + }, + { + "type": "Boolean", + "name": "compile", + "doc": "(optional) True to compile the template (defaults to undefined)
\n", + "optional": true + } + ], + "return": { + "type": "Ext.Template", + "doc": "this
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/Template.js", + "linenr": 154, + "html_filename": "Template2.html", + "href": "Template2.html#Ext-Template-method-set", + "shortDoc": "Sets the HTML used as the template and optionally compiles it.
\n" + } + ], + "property": [ + + ], + "event": [ + + ], + "filename": "/Users/nick/Projects/sencha/SDK/platform/src/XTemplate.js", + "linenr": 1, + "html_filename": "XTemplate.html", + "href": "XTemplate.html#Ext-XTemplate", + "cssVar": [ + + ], + "cssMixin": [ + + ], + "component": false, + "superclasses": [ + "Ext.Template" + ], + "subclasses": [ + + ], + "mixedInto": [ + + ], + "allMixins": [ + + ] +}); \ No newline at end of file