The regular expression used to match code variables (default: matches {[expression]}).
\n", - "linenr": 359, - "html_filename": "XTemplate.html" - }, - { - "type": "Boolean", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "Template2.html#Ext-Template-cfg-disableFormats", - "shortDoc": "true to disable format functions in the template. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/Template.js", - "private": false, - "name": "disableFormats", - "owner": "Ext.Template", - "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", - "linenr": 111, - "html_filename": "Template2.html" - } - ], - "method": [ - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-addStatics", - "shortDoc": "Add / override static properties of this class. ...", - "static": true, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - { - "type": "Object", - "optional": false, - "doc": "\n", - "name": "members" - } - ], - "name": "addStatics", - "owner": "Ext.Base", - "doc": "Add / override static properties of this class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.addStatics({\n someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'\n method1: function() { ... }, // My.cool.Class.method1 = function() { ... };\n method2: function() { ... } // My.cool.Class.method2 = function() { ... };\n});\nthis
\n" - }, - "html_filename": "Base3.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "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. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/Template.js", - "private": false, - "params": [ - { - "type": "Mixed", - "optional": false, - "doc": "The context element
\n", - "name": "el" - }, - { - "type": "Object/Array", - "optional": false, - "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", - "name": "returnElement" - } - ], - "name": "append", - "owner": "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", - "linenr": 235, - "return": { - "type": "HTMLElement/Ext.core.Element", - "doc": "The new node or Element
\n" - }, - "html_filename": "Template2.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "XTemplate.html#Ext-XTemplate-method-apply", - "shortDoc": "Alias for applyTemplate\nReturns an HTML fragment of this template with the specified values applied. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/XTemplate.js", - "private": false, - "params": [ - { - "type": "Object/Array", - "optional": false, - "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", - "name": "values" - } - ], - "name": "apply", - "owner": "Ext.XTemplate", - "doc": "Alias for applyTemplate\nReturns an HTML fragment of this template with the specified values applied.
\n", - "linenr": 488, - "return": { - "type": "String", - "doc": "The HTML fragment
\n" - }, - "html_filename": "XTemplate.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "XTemplate.html#Ext-XTemplate-method-applyTemplate", - "shortDoc": "Returns an HTML fragment of this template with the specified values applied. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/XTemplate.js", - "private": false, - "params": [ - { - "type": "Object", - "optional": false, - "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", - "name": "values" - } - ], - "name": "applyTemplate", - "owner": "Ext.XTemplate", - "doc": "Returns an HTML fragment of this template with the specified values applied.
\n", - "linenr": 471, - "return": { - "type": "String", - "doc": "The HTML fragment
\n" - }, - "html_filename": "XTemplate.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-callOverridden", - "shortDoc": "Call the original method that was previously overridden with Ext.Base.override\n\nExt.define('My.Cat', {\n constructo...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - { - "type": "Array/Arguments", - "optional": false, - "doc": "The arguments, either an array or the arguments object
Call the original method that was previously overridden with Ext.Base.override
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n\n return this;\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n var instance = this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n\n return instance;\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\nReturns the result after calling the overridden method
\n" - }, - "html_filename": "Base3.html" - }, - { - "deprecated": null, - "alias": null, - "protected": true, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-callParent", - "shortDoc": "Call the parent's overridden method. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - { - "type": "Array/Arguments", - "optional": false, - "doc": "The arguments, either an array or the arguments object\nfrom the current method, for example: this.callParent(arguments)
Call the parent's overridden method. For example:
\n\nExt.define('My.own.A', {\n constructor: function(test) {\n alert(test);\n }\n});\n\nExt.define('My.own.B', {\n extend: 'My.own.A',\n\n constructor: function(test) {\n alert(test);\n\n this.callParent([test + 1]);\n }\n});\n\nExt.define('My.own.C', {\n extend: 'My.own.B',\n\n constructor: function() {\n alert(\"Going to call parent's overriden constructor...\");\n\n this.callParent(arguments);\n }\n});\n\nvar a = new My.own.A(1); // alerts '1'\nvar b = new My.own.B(1); // alerts '1', then alerts '2'\nvar c = new My.own.C(2); // alerts \"Going to call parent's overriden constructor...\"\n // alerts '2', then alerts '3'\nReturns the result from the superclass' method
\n" - }, - "html_filename": "Base3.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "XTemplate.html#Ext-XTemplate-method-compile", - "shortDoc": "Compile the template to a function for optimized performance. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/XTemplate.js", - "private": false, - "params": [ - - ], - "name": "compile", - "owner": "Ext.XTemplate", - "doc": "Compile the template to a function for optimized performance. Recommended if the template will be used frequently.
\n", - "linenr": 480, - "return": { - "type": "Function", - "doc": "The compiled function
\n" - }, - "html_filename": "XTemplate.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-create", - "shortDoc": "Create a new instance of this Class. ...", - "static": true, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - - ], - "name": "create", - "owner": "Ext.Base", - "doc": "Create a new instance of this Class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.create({\n someConfig: true\n});\nAll parameters are passed to the constructor of the class.
\n", - "linenr": 329, - "return": { - "type": "Object", - "doc": "the created instance.
\n" - }, - "html_filename": "Base3.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-createAlias", - "shortDoc": "Create aliases for existing prototype methods. ...", - "static": true, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - { - "type": "String/Object", - "optional": false, - "doc": "The new method name, or an object to set multiple aliases. See\nflexSetter
\n", - "name": "alias" - }, - { - "type": "String/Object", - "optional": false, - "doc": "The original method name
\n", - "name": "origin" - } - ], - "name": "createAlias", - "owner": "Ext.Base", - "doc": "Create aliases for existing prototype methods. Example:
\n\nExt.define('My.cool.Class', {\n method1: function() { ... },\n method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n method3: 'method1',\n method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\nA DOM element or its id
\n", - "name": "el" - }, - { - "type": "Object", - "optional": false, - "doc": "\n", - "name": "config" - } - ], - "name": "from", - "owner": "Ext.XTemplate", - "doc": "Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
\n", - "linenr": 268, - "return": { - "type": "Ext.Template", - "doc": "The created template
\n" - }, - "html_filename": "XTemplate.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-getName", - "shortDoc": "Get the current class' name in string format. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - - ], - "name": "getName", - "owner": "Ext.Base", - "doc": "Get the current class' name in string format.
\n\nExt.define('My.cool.Class', {\n constructor: function() {\n alert(this.self.getName()); // alerts 'My.cool.Class'\n }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\nclassName
\n" - }, - "html_filename": "Base3.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-implement", - "shortDoc": "Add methods / properties to the prototype of this class. ...", - "static": true, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - { - "type": "Object", - "optional": false, - "doc": "\n", - "name": "members" - } - ], - "name": "implement", - "owner": "Ext.Base", - "doc": "Add methods / properties to the prototype of this class.
\n\nExt.define('My.awesome.Cat', {\n constructor: function() {\n ...\n }\n});\n\n My.awesome.Cat.implement({\n meow: function() {\n alert('Meowww...');\n }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\nInitialize configuration for this class. a typical example:
\n\nExt.define('My.awesome.Class', {\n // The default config\n config: {\n name: 'Awesome',\n isAwesome: true\n },\n\n constructor: function(config) {\n this.initConfig(config);\n\n return this;\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\nmixins The mixin prototypes as key - value pairs
\n" - }, - "html_filename": "Base3.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Template2.html#Ext-Template-method-insertAfter", - "shortDoc": "Applies the supplied values to the template and inserts the new node(s) after el. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/Template.js", - "private": false, - "params": [ - { - "type": "Mixed", - "optional": false, - "doc": "The context element
\n", - "name": "el" - }, - { - "type": "Object/Array", - "optional": false, - "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", - "name": "values" - }, - { - "type": "Boolean", - "optional": true, - "doc": "(optional) true to return a Ext.core.Element (defaults to undefined)
\n", - "name": "returnElement" - } - ], - "name": "insertAfter", - "owner": "Ext.Template", - "doc": "Applies the supplied values to the template and inserts the new node(s) after el.
\n", - "linenr": 224, - "return": { - "type": "HTMLElement/Ext.core.Element", - "doc": "The new node or Element
\n" - }, - "html_filename": "Template2.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Template2.html#Ext-Template-method-insertBefore", - "shortDoc": "Applies the supplied values to the template and inserts the new node(s) before el. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/Template.js", - "private": false, - "params": [ - { - "type": "Mixed", - "optional": false, - "doc": "The context element
\n", - "name": "el" - }, - { - "type": "Object/Array", - "optional": false, - "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", - "name": "values" - }, - { - "type": "Boolean", - "optional": true, - "doc": "(optional) true to return a Ext.core.Element (defaults to undefined)
\n", - "name": "returnElement" - } - ], - "name": "insertBefore", - "owner": "Ext.Template", - "doc": "Applies the supplied values to the template and inserts the new node(s) before el.
\n", - "linenr": 213, - "return": { - "type": "HTMLElement/Ext.core.Element", - "doc": "The new node or Element
\n" - }, - "html_filename": "Template2.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "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. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/Template.js", - "private": false, - "params": [ - { - "type": "Mixed", - "optional": false, - "doc": "The context element
\n", - "name": "el" - }, - { - "type": "Object/Array", - "optional": false, - "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", - "name": "values" - }, - { - "type": "Boolean", - "optional": true, - "doc": "(optional) true to return a Ext.core.Element (defaults to undefined)
\n", - "name": "returnElement" - } - ], - "name": "insertFirst", - "owner": "Ext.Template", - "doc": "Applies the supplied values to the template and inserts the new node(s) as the first child of el.
\n", - "linenr": 202, - "return": { - "type": "HTMLElement/Ext.core.Element", - "doc": "The new node or Element
\n" - }, - "html_filename": "Template2.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-override", - "shortDoc": "Override prototype members of this class. ...", - "static": true, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - { - "type": "Object", - "optional": false, - "doc": "\n", - "name": "members" - } - ], - "name": "override", - "owner": "Ext.Base", - "doc": "Override prototype members of this class. Overridden methods can be invoked via\nExt.Base.callOverridden
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n\n return this;\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n var instance = this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n\n return instance;\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\nthis
\n" - }, - "html_filename": "Base3.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "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). ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/Template.js", - "private": false, - "params": [ - { - "type": "Mixed", - "optional": false, - "doc": "The context element
\n", - "name": "el" - }, - { - "type": "Object/Array", - "optional": false, - "doc": "The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n", - "name": "values" - }, - { - "type": "Boolean", - "optional": true, - "doc": "(optional) true to return a Ext.core.Element (defaults to undefined)
\n", - "name": "returnElement" - } - ], - "name": "overwrite", - "owner": "Ext.Template", - "doc": "Applies the supplied values to the template and overwrites the content of el with the new node(s).
\n", - "linenr": 256, - "return": { - "type": "HTMLElement/Ext.core.Element", - "doc": "The new node or Element
\n" - }, - "html_filename": "Template2.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "Template2.html#Ext-Template-method-set", - "shortDoc": "Sets the HTML used as the template and optionally compiles it. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/Template.js", - "private": false, - "params": [ - { - "type": "String", - "optional": false, - "doc": "\n", - "name": "html" - }, - { - "type": "Boolean", - "optional": true, - "doc": "(optional) True to compile the template (defaults to undefined)
\n", - "name": "compile" - } - ], - "name": "set", - "owner": "Ext.Template", - "doc": "Sets the HTML used as the template and optionally compiles it.
\n", - "linenr": 153, - "return": { - "type": "Ext.Template", - "doc": "this
\n" - }, - "html_filename": "Template2.html" - }, - { - "deprecated": null, - "alias": null, - "protected": true, - "tagname": "method", - "href": "Base3.html#Ext-Base-method-statics", - "shortDoc": "Get the reference to the class from which this object was instantiated. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/core/src/class/Base.js", - "private": false, - "params": [ - - ], - "name": "statics", - "owner": "Ext.Base", - "doc": "Get the reference to the class from which this object was instantiated. Note that unlike Ext.Base.self,\nthis.statics() is scope-independent and it always returns the class from which it was called, regardless of what\nthis points to during run-time
Ext.define('My.Cat', {\n statics: {\n totalCreated: 0,\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n var statics = this.statics();\n\n alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to\n // equivalent to: My.Cat.speciesName\n\n alert(this.self.speciesName); // dependent on 'this'\n\n statics.totalCreated++;\n\n return this;\n },\n\n clone: function() {\n var cloned = new this.self; // dependent on 'this'\n\n cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName\n\n return cloned;\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n },\n\n constructor: function() {\n this.callParent();\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nalert(clone.groupName); // alerts 'Cat'\n\nalert(My.Cat.totalCreated); // alerts 3\nGet the reference to the current class from which this object was instantiated. Unlike Ext.Base.statics,\nthis.self is scope-dependent and it's meant to be used for dynamic inheritance. See Ext.Base.statics\nfor a detailed comparison
Ext.define('My.Cat', {\n statics: {\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n alert(this.self.speciesName); / dependent on 'this'\n\n return this;\n },\n\n clone: function() {\n return new this.self();\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nA 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 Hierarchy
Ext.BaseExt.TemplateExt.XTemplateFiles
A template class that supports advanced functionality like:
\n\nXTemplate provides the templating mechanism built into:
\n\nThe Ext.Template describes the acceptable parameters to pass to the constructor. The following examples\ndemonstrate all of the supported features.
\n\nThis is the data object used for reference in each code example:
\n\nvar data = {\n name: 'Tommy Maintz',\n title: 'Lead Developer',\n company: 'Sencha Inc.',\n email: 'tommy@sencha.com',\n address: '5 Cups Drive',\n city: 'Palo Alto',\n state: 'CA',\n zip: '44102',\n drinks: ['Coffee', 'Soda', 'Water'],\n kids: [\n {\n name: 'Joshua',\n age:3\n },\n {\n name: 'Matthew',\n age:2\n },\n {\n name: 'Solomon',\n age:0\n }\n ]\n};\nThe tpl tag and the for operator are used to process the provided data object:
\n\nExamples:
\n\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\nUsing the sample data above:
\n\nvar 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\nAn example illustrating how the for property can be leveraged to access specified members of the provided data\nobject to populate the template:
\n\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\nFlat arrays that contain values (and not objects) can be auto-rendered using the special {.} variable inside a\nloop. This variable will represent the value of the array at the current index:
var 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);\nWhen processing a sub-template, for example while looping through a child array, you can access the parent object's\nmembers via the parent object:
\n\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);\nThe tpl tag and the if operator are used to provide conditional checks for deciding whether or not to render\nspecific parts of the template. Notes:
\n\nExamples:
\n\n<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>\nUsing the sample data above:
\n\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);\nThe following basic math operators may be applied directly on numeric data values:
\n\n+ - * /\nFor example:
\n\nvar 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);\nAnything between {[ ... ]} is considered code to be executed in the scope of the template. There are some special\nvariables available in that code:
This example demonstrates basic row striping using an inline code block and the xindex variable:
\n\nvar 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);\nOne or more member functions can be specified in a configuration object passed into the XTemplate constructor for\nmore complex processing:
\n\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 disableFormats: 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);\nThe regular expression used to match code variables. Default: matches {[expression]}.
\nDefaults to: /\\{\\[((?:\\\\\\]|.|\\n)*?)\\]\\}/g
Only applies to Ext.Template, XTemplates are compiled automatically.
\nOnly applies to Ext.Template, XTemplates are compiled automatically.
\nGet the reference to the current class from which this object was instantiated. Unlike statics,\nthis.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics\nfor a detailed comparison
Ext.define('My.Cat', {\n statics: {\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n alert(this.self.speciesName); / dependent on 'this'\n\n return this;\n },\n\n clone: function() {\n return new this.self();\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nApplies the supplied values to the template and appends the new node(s) to the specified el.
For example usage see Ext.Template class docs.
\nThe context element
\nThe template values. See applyTemplate for details.
\ntrue to return an Ext.Element.
\nThe new node or Element
\nAlias for applyTemplate.
\n\nReturns an HTML fragment of this template with the specified values applied.
\nThe template values. Can be an array if your params are numeric:
\n\n\n\n\nvar tpl = new Ext.Template('Name: {0}, Age: {1}');\ntpl.applyTemplate(['John', 25]);\nor an object:
\n\n\n\n\nvar tpl = new Ext.Template('Name: {name}, Age: {age}');\ntpl.applyTemplate({name: 'John', age: 25});\nThe HTML fragment
\n\nReturns an HTML fragment of this template with the specified values applied.
\nThe template values. Can be an array if your params are numeric:
\n\n\n\n\nvar tpl = new Ext.Template('Name: {0}, Age: {1}');\ntpl.applyTemplate(['John', 25]);\nor an object:
\n\n\n\n\nvar tpl = new Ext.Template('Name: {name}, Age: {age}');\ntpl.applyTemplate({name: 'John', age: 25});\nThe HTML fragment
\n\nCall the original method that was previously overridden with override
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n\n return this;\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n var instance = this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n\n return instance;\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\nThe arguments, either an array or the arguments object
Returns the result after calling the overridden method
\nCall the parent's overridden method. For example:
\n\nExt.define('My.own.A', {\n constructor: function(test) {\n alert(test);\n }\n});\n\nExt.define('My.own.B', {\n extend: 'My.own.A',\n\n constructor: function(test) {\n alert(test);\n\n this.callParent([test + 1]);\n }\n});\n\nExt.define('My.own.C', {\n extend: 'My.own.B',\n\n constructor: function() {\n alert(\"Going to call parent's overriden constructor...\");\n\n this.callParent(arguments);\n }\n});\n\nvar a = new My.own.A(1); // alerts '1'\nvar b = new My.own.B(1); // alerts '1', then alerts '2'\nvar c = new My.own.C(2); // alerts \"Going to call parent's overriden constructor...\"\n // alerts '2', then alerts '3'\nThe arguments, either an array or the arguments object\nfrom the current method, for example: this.callParent(arguments)
Returns the result from the superclass' method
\nDoes nothing. XTemplates are compiled automatically, so this function simply returns this.
\nthis
\nInitialize configuration for this class. a typical example:
\n\nExt.define('My.awesome.Class', {\n // The default config\n config: {\n name: 'Awesome',\n isAwesome: true\n },\n\n constructor: function(config) {\n this.initConfig(config);\n\n return this;\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\nmixins The mixin prototypes as key - value pairs
\nApplies the supplied values to the template and inserts the new node(s) after el.
\nThe context element
\nThe template values. See applyTemplate for details.
\ntrue to return a Ext.Element.
\nThe new node or Element
\nApplies the supplied values to the template and inserts the new node(s) before el.
\nThe context element
\nThe template values. See applyTemplate for details.
\ntrue to return a Ext.Element.
\nThe new node or Element
\nApplies the supplied values to the template and inserts the new node(s) as the first child of el.
\nThe context element
\nThe template values. See applyTemplate for details.
\ntrue to return a Ext.Element.
\nThe new node or Element
\nApplies the supplied values to the template and overwrites the content of el with the new node(s).
\nThe context element
\nThe template values. See applyTemplate for details.
\ntrue to return a Ext.Element.
\nThe new node or Element
\nGet the reference to the class from which this object was instantiated. Note that unlike self,\nthis.statics() is scope-independent and it always returns the class from which it was called, regardless of what\nthis points to during run-time
Ext.define('My.Cat', {\n statics: {\n totalCreated: 0,\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n var statics = this.statics();\n\n alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to\n // equivalent to: My.Cat.speciesName\n\n alert(this.self.speciesName); // dependent on 'this'\n\n statics.totalCreated++;\n\n return this;\n },\n\n clone: function() {\n var cloned = new this.self; // dependent on 'this'\n\n cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName\n\n return cloned;\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n },\n\n constructor: function() {\n this.callParent();\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nalert(clone.groupName); // alerts 'Cat'\n\nalert(My.Cat.totalCreated); // alerts 3\nAdd / override static properties of this class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.addStatics({\n someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'\n method1: function() { ... }, // My.cool.Class.method1 = function() { ... };\n method2: function() { ... } // My.cool.Class.method2 = function() { ... };\n});\nthis
\nBorrow another class' members to the prototype of this class.
\n\nExt.define('Bank', {\n money: '$$$',\n printMoney: function() {\n alert('$$$$$$$');\n }\n});\n\nExt.define('Thief', {\n ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\nThe class to borrow members from
\nThe names of the members to borrow
\nthis
\nCreate a new instance of this Class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.create({\n someConfig: true\n});\nAll parameters are passed to the constructor of the class.
\nthe created instance.
\nCreate aliases for existing prototype methods. Example:
\n\nExt.define('My.cool.Class', {\n method1: function() { ... },\n method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n method3: 'method1',\n method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\nThe new method name, or an object to set multiple aliases. See\nflexSetter
\nThe original method name
\nCreates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
\nThe created template
\nGet the current class' name in string format.
\n\nExt.define('My.cool.Class', {\n constructor: function() {\n alert(this.self.getName()); // alerts 'My.cool.Class'\n }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\nclassName
\nAdd methods / properties to the prototype of this class.
\n\nExt.define('My.awesome.Cat', {\n constructor: function() {\n ...\n }\n});\n\n My.awesome.Cat.implement({\n meow: function() {\n alert('Meowww...');\n }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\nOverride prototype members of this class. Overridden methods can be invoked via\ncallOverridden
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n\n return this;\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n var instance = this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n\n return instance;\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\nthis
\n